@everchron/ec-shards 14.11.0 → 14.12.1

package/dist/ec-shards.js

@@ -1,4 +1,4 @@
-import { defineAsyncComponent as ne, watch as ve, createBlock as h, openBlock as o, resolveDynamicComponent as be, unref as de, normalizeClass as y, createElementBlock as r, normalizeStyle as x, resolveComponent as g, createCommentVNode as u, createElementVNode as f, createVNode as b, createTextVNode as L, toDisplayString as w, renderSlot as p, Transition as _e, withCtx as S, computed as ze, Fragment as D, renderList as J, reactive as Ai, nextTick as Ri, onBeforeUnmount as Gt, toRefs as ei, isRef as Vi, onMounted as ti, useSlots as Di, ref as Fe, watchEffect as rt, withKeys as ee, Teleport as Ni, withDirectives as $e, vShow as it, mergeProps as Ae, normalizeProps as Fi, guardReactiveProps as Hi, withModifiers as W, resolveDirective as qi, vModelText as $i, createStaticVNode as si, markRaw as Wi, TransitionGroup as ii, h as ji, useCssVars as Ui } from "vue";
+import { defineAsyncComponent as ne, watch as ve, createBlock as h, openBlock as o, resolveDynamicComponent as be, unref as de, normalizeClass as y, createElementBlock as r, normalizeStyle as x, resolveComponent as g, createCommentVNode as u, createElementVNode as f, createVNode as b, createTextVNode as L, toDisplayString as w, renderSlot as p, Transition as _e, withCtx as S, computed as ze, Fragment as N, renderList as J, reactive as Ai, nextTick as Ri, onBeforeUnmount as Gt, toRefs as ei, isRef as Di, onMounted as ti, useSlots as Ni, ref as Fe, watchEffect as rt, withKeys as ee, Teleport as Vi, withDirectives as $e, vShow as it, mergeProps as Ae, normalizeProps as Fi, guardReactiveProps as Hi, withModifiers as W, resolveDirective as qi, vModelText as $i, createStaticVNode as si, markRaw as Wi, TransitionGroup as ii, h as ji, useCssVars as Ui } from "vue";
 const ae = (e, s, t) => {
   const a = e[s];
   return a ? typeof a == "function" ? a() : Promise.resolve(a) : new Promise((n, i) => {
@@ -94,10 +94,10 @@ function Yi(e, s, t, a, n, i) {
     style: x(i.styles)
   }, null, 6);
 }
-const V = /* @__PURE__ */ _(Ki, [["render", Yi], ["__scopeId", "data-v-8d624905"]]), Xi = {
+const D = /* @__PURE__ */ _(Ki, [["render", Yi], ["__scopeId", "data-v-8d624905"]]), Xi = {
   name: "ecs-alert",
   emits: ["action", "dismissed"],
-  components: { EcsIcon: O, EcsFocusRing: V },
+  components: { EcsIcon: O, EcsFocusRing: D },
   props: {
     /** The alert variant, which defines it's background color. */
     type: {
@@ -410,7 +410,7 @@ function hn(e, s, t, a, n, i) {
     class: y(["ecs-skeleton skeleton", [i.rectClass, { ai: t.ai }]]),
     style: x({ width: i.calculatedWidth, height: t.height + "px" })
   }, null, 6)) : t.type === "multi" ? (o(), r("div", mn, [
-    (o(!0), r(D, null, J(parseInt(t.count), (l) => (o(), r("div", {
+    (o(!0), r(N, null, J(parseInt(t.count), (l) => (o(), r("div", {
       key: l,
       class: y(["skeleton-wrap", ["skeleton-line-height-" + t.lineHeight, i.alignmentClass]])
     }, [
@@ -582,7 +582,7 @@ function bn(e, s, t, a, n, i) {
   ], 14, vn);
 }
 const nt = /* @__PURE__ */ _(pn, [["render", bn], ["__scopeId", "data-v-a25d1ba9"]]), _n = {
-  components: { EcsIcon: O, EcsFocusRing: V },
+  components: { EcsIcon: O, EcsFocusRing: D },
   emits: ["dismiss"],
   props: {
     /** The alert variant, which defines it's background color. */
@@ -701,7 +701,7 @@ const v_ = /* @__PURE__ */ _(wn, [["render", Sn], ["__scopeId", "data-v-d1ff2486
   emits: ["click"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** The button type: `root` should always be used for the very first button inside a breadcrumb, `link` for all regular buttons that reflect a level in the navigation, and `more` for an optional button that escapes levels within the breadcrumb. */
@@ -988,14 +988,14 @@ function et(e, s) {
     c.concat(et(ht(l)))
   );
 }
-function Vn(e) {
+function Dn(e) {
   return ["table", "td", "th"].indexOf(Ee(e)) >= 0;
 }
 function ws(e) {
   return !ye(e) || // https://github.com/popperjs/popper-core/issues/837
   Le(e).position === "fixed" ? null : e.offsetParent;
 }
-function Dn(e) {
+function Nn(e) {
   var s = /firefox/i.test(Wt()), t = /Trident/i.test(Wt());
   if (t && ye(e)) {
     var a = Le(e);
@@ -1012,11 +1012,11 @@ function Dn(e) {
   return null;
 }
 function at(e) {
-  for (var s = ge(e), t = ws(e); t && Vn(t) && Le(t).position === "static"; )
+  for (var s = ge(e), t = ws(e); t && Dn(t) && Le(t).position === "static"; )
     t = ws(t);
-  return t && (Ee(t) === "html" || Ee(t) === "body" && Le(t).position === "static") ? s : t || Dn(e) || s;
+  return t && (Ee(t) === "html" || Ee(t) === "body" && Le(t).position === "static") ? s : t || Nn(e) || s;
 }
-var ue = "top", Ce = "bottom", Be = "right", fe = "left", es = "auto", ot = [ue, Ce, Be, fe], Ye = "start", st = "end", Nn = "clippingParents", li = "viewport", Je = "popper", Fn = "reference", Ss = /* @__PURE__ */ ot.reduce(function(e, s) {
+var ue = "top", Ce = "bottom", Be = "right", fe = "left", es = "auto", ot = [ue, Ce, Be, fe], Ye = "start", st = "end", Vn = "clippingParents", li = "viewport", Je = "popper", Fn = "reference", Ss = /* @__PURE__ */ ot.reduce(function(e, s) {
   return e.concat([s + "-" + Ye, s + "-" + st]);
 }, []), ri = /* @__PURE__ */ [].concat(ot, [es]).reduce(function(e, s) {
   return e.concat([s, s + "-" + Ye, s + "-" + st]);
@@ -1209,15 +1209,15 @@ function gi(e, s) {
 }
 function ss(e, s) {
   s === void 0 && (s = {});
-  var t = s, a = t.placement, n = a === void 0 ? e.placement : a, i = t.strategy, l = i === void 0 ? e.strategy : i, c = t.boundary, d = c === void 0 ? Nn : c, m = t.rootBoundary, v = m === void 0 ? li : m, k = t.elementContext, E = k === void 0 ? Je : k, I = t.altBoundary, B = I === void 0 ? !1 : I, P = t.padding, T = P === void 0 ? 0 : P, C = fi(typeof T != "number" ? T : gi(T, ot)), M = E === Je ? Fn : Je, q = e.rects.popper, A = e.elements[B ? M : E], N = aa(qe(A) ? A : A.contextElement || Re(e.elements.popper), d, v, l), F = Ke(e.elements.reference), H = di({
+  var t = s, a = t.placement, n = a === void 0 ? e.placement : a, i = t.strategy, l = i === void 0 ? e.strategy : i, c = t.boundary, d = c === void 0 ? Vn : c, m = t.rootBoundary, v = m === void 0 ? li : m, k = t.elementContext, E = k === void 0 ? Je : k, I = t.altBoundary, B = I === void 0 ? !1 : I, P = t.padding, T = P === void 0 ? 0 : P, C = fi(typeof T != "number" ? T : gi(T, ot)), M = E === Je ? Fn : Je, q = e.rects.popper, A = e.elements[B ? M : E], V = aa(qe(A) ? A : A.contextElement || Re(e.elements.popper), d, v, l), F = Ke(e.elements.reference), H = di({
     reference: F,
     element: q,
     placement: n
   }), j = jt(Object.assign({}, q, H)), G = E === Je ? j : F, K = {
-    top: N.top - G.top + C.top,
-    bottom: G.bottom - N.bottom + C.bottom,
-    left: N.left - G.left + C.left,
-    right: G.right - N.right + C.right
+    top: V.top - G.top + C.top,
+    bottom: G.bottom - V.bottom + C.bottom,
+    left: V.left - G.left + C.left,
+    right: G.right - V.right + C.right
   }, X = e.modifiersData.offset;
   if (E === Je && X) {
     var Z = X[n];
@@ -1289,7 +1289,7 @@ function oa(e) {
                 v.reset = !1, A = -1;
                 continue;
               }
-              var N = v.orderedModifiers[A], F = N.fn, H = N.options, j = H === void 0 ? {} : H, G = N.name;
+              var V = v.orderedModifiers[A], F = V.fn, H = V.options, j = H === void 0 ? {} : H, G = V.name;
               typeof F == "function" && (v = F({
                 state: v,
                 options: j,
@@ -1320,14 +1320,14 @@ function oa(e) {
       v.orderedModifiers.forEach(function(T) {
         var C = T.name, M = T.options, q = M === void 0 ? {} : M, A = T.effect;
         if (typeof A == "function") {
-          var N = A({
+          var V = A({
             state: v,
             name: C,
             instance: I,
             options: q
           }), F = function() {
           };
-          k.push(N || F);
+          k.push(V || F);
         }
       });
     }
@@ -1398,12 +1398,12 @@ function zs(e) {
     y: P
   };
   I = T.x, P = T.y;
-  var C = l.hasOwnProperty("x"), M = l.hasOwnProperty("y"), q = fe, A = ue, N = window;
+  var C = l.hasOwnProperty("x"), M = l.hasOwnProperty("y"), q = fe, A = ue, V = window;
   if (m) {
     var F = at(t), H = "clientHeight", j = "clientWidth";
     if (F === ge(t) && (F = Re(t), Le(F).position !== "static" && c === "absolute" && (H = "scrollHeight", j = "scrollWidth")), F = F, n === ue || (n === fe || n === Be) && i === st) {
       A = Ce;
-      var G = k && F === N && N.visualViewport ? N.visualViewport.height : (
+      var G = k && F === V && V.visualViewport ? V.visualViewport.height : (
         // $FlowFixMe[prop-missing]
         F[H]
       );
@@ -1411,7 +1411,7 @@ function zs(e) {
     }
     if (n === fe || (n === ue || n === Ce) && i === st) {
       q = Be;
-      var K = k && F === N && N.visualViewport ? N.visualViewport.width : (
+      var K = k && F === V && V.visualViewport ? V.visualViewport.width : (
         // $FlowFixMe[prop-missing]
         F[j]
       );
@@ -1429,7 +1429,7 @@ function zs(e) {
   };
   if (I = Z.x, P = Z.y, d) {
     var R;
-    return Object.assign({}, X, (R = {}, R[A] = M ? "0" : "", R[q] = C ? "0" : "", R.transform = (N.devicePixelRatio || 1) <= 1 ? "translate(" + I + "px, " + P + "px)" : "translate3d(" + I + "px, " + P + "px, 0)", R));
+    return Object.assign({}, X, (R = {}, R[A] = M ? "0" : "", R[q] = C ? "0" : "", R.transform = (V.devicePixelRatio || 1) <= 1 ? "translate(" + I + "px, " + P + "px)" : "translate3d(" + I + "px, " + P + "px, 0)", R));
   }
   return Object.assign({}, X, (s = {}, s[A] = M ? P + "px" : "", s[q] = C ? I + "px" : "", s.transform = "", s));
 }
@@ -1524,7 +1524,7 @@ function wa(e) {
     rootBoundary: m,
     padding: k,
     altBoundary: v
-  }), C = Ie(s.placement), M = Xe(s.placement), q = !M, A = ts(C), N = _a(A), F = s.modifiersData.popperOffsets, H = s.rects.reference, j = s.rects.popper, G = typeof P == "function" ? P(Object.assign({}, s.rects, {
+  }), C = Ie(s.placement), M = Xe(s.placement), q = !M, A = ts(C), V = _a(A), F = s.modifiersData.popperOffsets, H = s.rects.reference, j = s.rects.popper, G = typeof P == "function" ? P(Object.assign({}, s.rects, {
     placement: s.placement
   })) : P, K = typeof G == "number" ? {
     mainAxis: G,
@@ -1538,15 +1538,15 @@ function wa(e) {
   };
   if (F) {
     if (i) {
-      var R, Q = A === "y" ? ue : fe, se = A === "y" ? Ce : Be, te = A === "y" ? "height" : "width", oe = F[A], je = oe + T[Q], ke = oe - T[se], Me = I ? -j[te] / 2 : 0, Ve = M === Ye ? H[te] : j[te], le = M === Ye ? -j[te] : -H[te], Ue = s.elements.arrow, Oe = I && Ue ? Qt(Ue) : {
+      var R, Q = A === "y" ? ue : fe, se = A === "y" ? Ce : Be, te = A === "y" ? "height" : "width", oe = F[A], je = oe + T[Q], ke = oe - T[se], Me = I ? -j[te] / 2 : 0, De = M === Ye ? H[te] : j[te], le = M === Ye ? -j[te] : -H[te], Ue = s.elements.arrow, Oe = I && Ue ? Qt(Ue) : {
         width: 0,
         height: 0
-      }, we = s.modifiersData["arrow#persistent"] ? s.modifiersData["arrow#persistent"].padding : ui(), $ = we[Q], Y = we[se], re = tt(0, H[te], Oe[te]), De = q ? H[te] / 2 - Me - re - $ - K.mainAxis : Ve - re - $ - K.mainAxis, Ei = q ? -H[te] / 2 + Me + re + Y + K.mainAxis : le + re + Y + K.mainAxis, _t = s.elements.arrow && at(s.elements.arrow), Ti = _t ? A === "y" ? _t.clientTop || 0 : _t.clientLeft || 0 : 0, fs = (R = X == null ? void 0 : X[A]) != null ? R : 0, Pi = oe + De - fs - Ti, Li = oe + Ei - fs, gs = tt(I ? gt(je, Pi) : je, oe, I ? He(ke, Li) : ke);
+      }, we = s.modifiersData["arrow#persistent"] ? s.modifiersData["arrow#persistent"].padding : ui(), $ = we[Q], Y = we[se], re = tt(0, H[te], Oe[te]), Ne = q ? H[te] / 2 - Me - re - $ - K.mainAxis : De - re - $ - K.mainAxis, Ei = q ? -H[te] / 2 + Me + re + Y + K.mainAxis : le + re + Y + K.mainAxis, _t = s.elements.arrow && at(s.elements.arrow), Ti = _t ? A === "y" ? _t.clientTop || 0 : _t.clientLeft || 0 : 0, fs = (R = X == null ? void 0 : X[A]) != null ? R : 0, Pi = oe + Ne - fs - Ti, Li = oe + Ei - fs, gs = tt(I ? gt(je, Pi) : je, oe, I ? He(ke, Li) : ke);
       F[A] = gs, Z[A] = gs - oe;
     }
     if (c) {
-      var ms, Mi = A === "x" ? ue : fe, Oi = A === "x" ? Ce : Be, Ne = F[N], lt = N === "y" ? "height" : "width", hs = Ne + T[Mi], ps = Ne - T[Oi], kt = [ue, fe].indexOf(C) !== -1, vs = (ms = X == null ? void 0 : X[N]) != null ? ms : 0, ys = kt ? hs : Ne - H[lt] - j[lt] - vs + K.altAxis, bs = kt ? Ne + H[lt] + j[lt] - vs - K.altAxis : ps, _s = I && kt ? ka(ys, Ne, bs) : tt(I ? ys : hs, Ne, I ? bs : ps);
-      F[N] = _s, Z[N] = _s - Ne;
+      var ms, Mi = A === "x" ? ue : fe, Oi = A === "x" ? Ce : Be, Ve = F[V], lt = V === "y" ? "height" : "width", hs = Ve + T[Mi], ps = Ve - T[Oi], kt = [ue, fe].indexOf(C) !== -1, vs = (ms = X == null ? void 0 : X[V]) != null ? ms : 0, ys = kt ? hs : Ve - H[lt] - j[lt] - vs + K.altAxis, bs = kt ? Ve + H[lt] + j[lt] - vs - K.altAxis : ps, _s = I && kt ? ka(ys, Ve, bs) : tt(I ? ys : hs, Ve, I ? bs : ps);
+      F[V] = _s, Z[V] = _s - Ve;
     }
     s.modifiersData[a] = Z;
   }
@@ -1616,7 +1616,7 @@ function Ia(e) {
         flipVariations: B,
         allowedAutoPlacements: P
       }) : we);
-    }, []), N = s.rects.reference, F = s.rects.popper, H = /* @__PURE__ */ new Map(), j = !0, G = A[0], K = 0; K < A.length; K++) {
+    }, []), V = s.rects.reference, F = s.rects.popper, H = /* @__PURE__ */ new Map(), j = !0, G = A[0], K = 0; K < A.length; K++) {
       var X = A[K], Z = Ie(X), R = Xe(X) === Ye, Q = [ue, Ce].indexOf(Z) >= 0, se = Q ? "width" : "height", te = ss(s, {
         placement: X,
         boundary: v,
@@ -1624,7 +1624,7 @@ function Ia(e) {
         altBoundary: E,
         padding: m
       }), oe = Q ? R ? Be : fe : R ? Ce : ue;
-      N[se] > F[se] && (oe = ft(oe));
+      V[se] > F[se] && (oe = ft(oe));
       var je = ft(oe), ke = [];
       if (i && ke.push(te[Z] <= 0), c && ke.push(te[oe] <= 0, te[je] <= 0), ke.every(function(Oe) {
         return Oe;
@@ -1635,18 +1635,18 @@ function Ia(e) {
       H.set(X, ke);
     }
     if (j)
-      for (var Me = B ? 3 : 1, Ve = function(we) {
+      for (var Me = B ? 3 : 1, De = function(we) {
         var $ = A.find(function(Y) {
           var re = H.get(Y);
           if (re)
-            return re.slice(0, we).every(function(De) {
-              return De;
+            return re.slice(0, we).every(function(Ne) {
+              return Ne;
             });
         });
         if ($)
           return G = $, "break";
       }, le = Me; le > 0; le--) {
-        var Ue = Ve(le);
+        var Ue = De(le);
         if (Ue === "break") break;
       }
     s.placement !== G && (s.modifiersData[a]._skip = !0, s.placement = G, s.reset = !0);
@@ -1695,7 +1695,7 @@ var Ma = function(s, t) {
 function Oa(e) {
   var s, t = e.state, a = e.name, n = e.options, i = t.elements.arrow, l = t.modifiersData.popperOffsets, c = Ie(t.placement), d = ts(c), m = [fe, Be].indexOf(c) >= 0, v = m ? "height" : "width";
   if (!(!i || !l)) {
-    var k = Ma(n.padding, t), E = Qt(i), I = d === "y" ? ue : fe, B = d === "y" ? Ce : Be, P = t.rects.reference[v] + t.rects.reference[d] - l[d] - t.rects.popper[v], T = l[d] - t.rects.reference[d], C = at(i), M = C ? d === "y" ? C.clientHeight || 0 : C.clientWidth || 0 : 0, q = P / 2 - T / 2, A = k[I], N = M - E[v] - k[B], F = M / 2 - E[v] / 2 + q, H = tt(A, F, N), j = d;
+    var k = Ma(n.padding, t), E = Qt(i), I = d === "y" ? ue : fe, B = d === "y" ? Ce : Be, P = t.rects.reference[v] + t.rects.reference[d] - l[d] - t.rects.popper[v], T = l[d] - t.rects.reference[d], C = at(i), M = C ? d === "y" ? C.clientHeight || 0 : C.clientWidth || 0 : 0, q = P / 2 - T / 2, A = k[I], V = M - E[v] - k[B], F = M / 2 - E[v] / 2 + q, H = tt(A, F, V), j = d;
     t.modifiersData[a] = (s = {}, s[j] = H, s.centerOffset = H - F, s);
   }
 }
@@ -1712,7 +1712,7 @@ const Ra = {
   requires: ["popperOffsets"],
   requiresIfExists: ["preventOverflow"]
 }, xt = (e) => parseInt(e, 10);
-function Va({
+function Da({
   arrowPadding: e,
   emit: s,
   locked: t,
@@ -1775,8 +1775,8 @@ function Va({
     close: E
   };
 }
-function Da(e, s, t) {
-  Vi(e) ? ve(e, (a, n) => {
+function Na(e, s, t) {
+  Di(e) ? ve(e, (a, n) => {
     n == null || n.removeEventListener(s, t), a == null || a.addEventListener(s, t);
   }) : ti(() => {
     e.addEventListener(s, t);
@@ -1785,9 +1785,9 @@ function Da(e, s, t) {
     (a = de(e)) == null || a.removeEventListener(s, t);
   });
 }
-function Na(e, s) {
+function Va(e, s) {
   const t = "pointerdown";
-  return typeof window > "u" || !window ? void 0 : Da(window, t, (n) => {
+  return typeof window > "u" || !window ? void 0 : Na(window, t, (n) => {
     const i = de(e);
     i && (i === n.target || n.composedPath().includes(i) || s(n));
   });
@@ -1936,7 +1936,7 @@ const $a = /* @__PURE__ */ _(Fa, [["render", qa], ["__scopeId", "data-v-b4b01b19
   },
   emits: ["open:popper", "close:popper", "shown"],
   setup(e, { expose: s, emit: t }) {
-    const a = t, n = Di(), i = e;
+    const a = t, n = Ni(), i = e;
     let l = null;
     const c = "ecs-popover-" + parseInt(Math.ceil(Math.random() * Date.now()).toPrecision(16).toString().replace(".", "")), d = Fe(!1), m = Fe(null), v = Fe(null), k = Fe(!1), E = Fe(!1), I = Fe([]), B = Fe(!0), P = () => {
       n.content ? E.value = !0 : E.value = !1;
@@ -1955,14 +1955,14 @@ const $a = /* @__PURE__ */ _(Fa, [["render", qa], ["__scopeId", "data-v-b4b01b19
       content: M,
       disableClickAway: q,
       disabled: A,
-      interactive: N,
+      interactive: V,
       locked: F,
       offsetDistance: H,
       offsetSkid: j,
       openDelay: G,
       placement: K,
       show: X
-    } = ei(i), { isOpen: Z, open: R, close: Q } = Va({
+    } = ei(i), { isOpen: Z, open: R, close: Q } = Da({
       arrowPadding: T,
       emit: a,
       locked: F,
@@ -1975,14 +1975,14 @@ const $a = /* @__PURE__ */ _(Fa, [["render", qa], ["__scopeId", "data-v-b4b01b19
       () => !q.value && !se.value
     );
     ze(
-      () => N.value ? `border: ${H.value}px solid transparent; margin: -${H.value}px;` : null
+      () => V.value ? `border: ${H.value}px solid transparent; margin: -${H.value}px;` : null
     );
-    const ke = St.debounce(R, G.value), Me = St.debounce(Q, C.value), Ve = async () => {
+    const ke = St.debounce(R, G.value), Me = St.debounce(Q, C.value), De = async () => {
       te.value || se.value || (Me.clear(), d.value = !0, ke());
     }, le = async () => {
       se.value || (ke.clear(), d.value = !1, Me());
     }, Ue = () => {
-      Z.value ? le() : Ve();
+      Z.value ? le() : De();
     };
     ve([E, A], ([$, Y]) => {
       Z.value && (!$ || Y) && Q();
@@ -1993,7 +1993,7 @@ const $a = /* @__PURE__ */ _(Fa, [["render", qa], ["__scopeId", "data-v-b4b01b19
     }), rt(() => {
       se.value && (X.value ? ke() : Me());
     }), rt(() => {
-      je.value && Na(m, le);
+      je.value && Va(m, le);
     }), ve(M, ($) => {
       $ ? E.value = !0 : E.value = !1;
     }), rt(() => {
@@ -2013,12 +2013,12 @@ const $a = /* @__PURE__ */ _(Fa, [["render", qa], ["__scopeId", "data-v-b4b01b19
       const Y = Array.from(I.value), re = Y.indexOf(document.activeElement);
       if ($.key === "ArrowDown") {
         $.preventDefault();
-        const De = (re + 1) % Y.length;
-        Y[De].focus();
+        const Ne = (re + 1) % Y.length;
+        Y[Ne].focus();
       } else if ($.key === "ArrowUp") {
         $.preventDefault();
-        const De = (re - 1 + Y.length) % Y.length;
-        Y[De].focus();
+        const Ne = (re - 1 + Y.length) % Y.length;
+        Y[Ne].focus();
       } else $.key === "Escape" ? ($.preventDefault(), le()) : $.key === "Tab" && B.value && ($.preventDefault(), B.value = !1, Y.length > 0 && Y[0].focus());
     };
     return rt(() => {
@@ -2030,9 +2030,9 @@ const $a = /* @__PURE__ */ _(Fa, [["render", qa], ["__scopeId", "data-v-b4b01b19
       f("div", {
         ref_key: "triggerNode",
         ref: v,
-        onMouseover: Y[0] || (Y[0] = (re) => e.hover && Ve()),
+        onMouseover: Y[0] || (Y[0] = (re) => e.hover && De()),
         onClick: Ue,
-        onFocus: Ve,
+        onFocus: De,
         onKeyup: ee(le, ["esc"]),
         "aria-describedby": c,
         "aria-open": d.value || null,
@@ -2040,12 +2040,12 @@ const $a = /* @__PURE__ */ _(Fa, [["render", qa], ["__scopeId", "data-v-b4b01b19
       }, [
         p($.$slots, "default", {}, void 0, !0)
       ], 40, Wa),
-      (o(), h(Ni, { to: "body" }, [
+      (o(), h(Vi, { to: "body" }, [
         b(_e, { name: "fade" }, {
           default: S(() => [
             e.persistent || d.value ? $e((o(), r("div", {
               key: 0,
-              onClick: Y[1] || (Y[1] = (re) => !de(N) && le()),
+              onClick: Y[1] || (Y[1] = (re) => !de(V) && le()),
               class: "ecs-popover popper",
               ref_key: "popperNode",
               ref: m,
@@ -2188,7 +2188,7 @@ function Xa(e, s, t, a, n, i) {
 }
 const is = /* @__PURE__ */ _(Ya, [["render", Xa], ["__scopeId", "data-v-b0731279"]]), Ja = {
   name: "ecs-form-check",
-  components: { EcsFocusRing: V },
+  components: { EcsFocusRing: D },
   props: {
     /** Sets the checkbox to disabled. */
     disabled: {
@@ -2733,7 +2733,7 @@ function uo(e, s, t, a, n, i) {
 const fo = /* @__PURE__ */ _(lo, [["render", uo], ["__scopeId", "data-v-88d4a1b8"]]), go = {
   name: "ecs-switch",
   emits: ["input"],
-  components: { EcsFocusRing: V },
+  components: { EcsFocusRing: D },
   mixins: [he],
   props: {
     /** Sets the name attribute. */
@@ -2865,7 +2865,7 @@ function bo(e, s, t, a, n, i) {
 const hi = /* @__PURE__ */ _(go, [["render", bo], ["__scopeId", "data-v-951d9222"]]), _o = {
   name: "ecs-sortbutton",
   emits: ["click"],
-  components: { EcsFormCheck: ns, EcsFocusRing: V },
+  components: { EcsFormCheck: ns, EcsFocusRing: D },
   props: {
     /** Disables the sort button. */
     disabled: {
@@ -2983,7 +2983,7 @@ const wo = /* @__PURE__ */ _(_o, [["render", ko], ["__scopeId", "data-v-2f0cb806
   emits: ["click", "mouseover", "mouseleave"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Defines the type of button, as well as it's designated importance. */
@@ -3155,7 +3155,7 @@ function zo(e, s, t, a, n, i) {
 const pe = /* @__PURE__ */ _(So, [["render", zo], ["__scopeId", "data-v-47d42f7e"]]), Io = {
   name: "ecs-popover-list-item",
   emits: ["click", "input", "change", "secondaryClick"],
-  components: { EcsCheckbox: vt, EcsRadiobutton: fo, EcsSwitch: hi, EcsSortbutton: wo, EcsIcon: O, EcsFileIcon: as, EcsButton: pe, EcsFocusRing: V },
+  components: { EcsCheckbox: vt, EcsRadiobutton: fo, EcsSwitch: hi, EcsSortbutton: wo, EcsIcon: O, EcsFileIcon: as, EcsButton: pe, EcsFocusRing: D },
   props: {
     /** Determines the type of popover list item.*/
     type: {
@@ -3326,10 +3326,10 @@ const pe = /* @__PURE__ */ _(So, [["render", zo], ["__scopeId", "data-v-47d42f7e
 }, Ao = {
   key: 0,
   class: "after"
-}, Ro = ["tabindex"], Vo = {
+}, Ro = ["tabindex"], Do = {
   key: 0,
   class: "after"
-}, Do = ["tabindex", "href"], No = { class: "text" }, Fo = { class: "text-inner" }, Ho = {
+}, No = ["tabindex", "href"], Vo = { class: "text" }, Fo = { class: "text-inner" }, Ho = {
   key: 1,
   class: "help"
 }, qo = {
@@ -3442,7 +3442,7 @@ function Ko(e, s, t, a, n, i) {
         ]),
         _: 3
       }, 8, ["sort", "disabled"]),
-      t.suffix ? (o(), r("span", Vo, w(t.suffix), 1)) : u("", !0),
+      t.suffix ? (o(), r("span", Do, w(t.suffix), 1)) : u("", !0),
       t.draggable ? (o(), h(c, {
         key: 1,
         type: "drag-handler",
@@ -3478,7 +3478,7 @@ function Ko(e, s, t, a, n, i) {
         height: 24,
         class: "file-icon"
       }, null, 8, ["type"])) : u("", !0),
-      f("span", No, [
+      f("span", Vo, [
         f("span", Fo, [
           p(e.$slots, "default", {}, void 0, !0)
         ]),
@@ -3516,7 +3516,7 @@ function Ko(e, s, t, a, n, i) {
         class: "drag-handle"
       })) : u("", !0),
       b(E, { inset: 0 })
-    ], 10, Do)) : (o(), r("button", {
+    ], 10, No)) : (o(), r("button", {
       key: 5,
       class: y(["ecs-popover-list-item", [
         t.danger ? "danger" : "",
@@ -3590,7 +3590,7 @@ const os = /* @__PURE__ */ _(Io, [["render", Ko], ["__scopeId", "data-v-e7504ef5
   emits: ["click"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** If the button should act as a link, you can set the href with this prop. */
@@ -3919,7 +3919,7 @@ function il(e, s, t, a, n, i) {
           content: S(() => [
             b(v, null, {
               default: S(() => [
-                (o(!0), r(D, null, J(t.options, (I, B) => (o(), h(d, {
+                (o(!0), r(N, null, J(t.options, (I, B) => (o(), h(d, {
                   key: B,
                   disabled: I.disabled || null,
                   onClick: (P) => e.$emit("select", I.action)
@@ -3981,7 +3981,7 @@ const k_ = /* @__PURE__ */ _(nl, [["render", ol], ["__scopeId", "data-v-83c21366
   name: "ecs-button-collapse",
   emits: ["click"],
   components: {
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Defines the type of button: `classic` shows a +/-, while `chevron` shows a rotating arrow. */
@@ -4743,7 +4743,7 @@ const Ol = {
   emits: ["click"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   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). */
@@ -4817,20 +4817,20 @@ function Rl(e, s, t, a, n, i) {
     b(c)
   ], 14, Al);
 }
-const w_ = /* @__PURE__ */ _(Ol, [["render", Rl], ["__scopeId", "data-v-457e2cc7"]]), Vl = {
+const w_ = /* @__PURE__ */ _(Ol, [["render", Rl], ["__scopeId", "data-v-457e2cc7"]]), Dl = {
   name: "ecs-context-button-group"
-}, Dl = { class: "ecs-context-button-group" };
-function Nl(e, s, t, a, n, i) {
-  return o(), r("div", Dl, [
+}, Nl = { class: "ecs-context-button-group" };
+function Vl(e, s, t, a, n, i) {
+  return o(), r("div", Nl, [
     p(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const S_ = /* @__PURE__ */ _(Vl, [["render", Nl], ["__scopeId", "data-v-94a53b69"]]), Fl = {
+const S_ = /* @__PURE__ */ _(Dl, [["render", Vl], ["__scopeId", "data-v-94a53b69"]]), Fl = {
   name: "ecs-button-dialog",
   emits: ["click"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   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). */
@@ -4845,7 +4845,15 @@ const S_ = /* @__PURE__ */ _(Vl, [["render", Nl], ["__scopeId", "data-v-94a53b69
       default: "cancel"
     },
     /** Turns the button into a loading state. */
-    loading: Boolean
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Disables the button. */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
   },
   computed: {
     typeClass() {
@@ -4855,13 +4863,15 @@ const S_ = /* @__PURE__ */ _(Vl, [["render", Nl], ["__scopeId", "data-v-94a53b69
       return this.loading ? "loading" : this.icon;
     }
   }
-}, Hl = ["aria-busy"];
+}, Hl = ["aria-busy", "data-type", "disabled"];
 function ql(e, s, t, a, n, i) {
   const l = g("ecs-icon"), c = g("ecs-focus-ring");
   return o(), r("button", {
     onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
     class: y([[i.typeClass, t.loading ? "loading" : ""], "ecs-dialog-footer-button"]),
-    "aria-busy": t.loading || null
+    "aria-busy": t.loading || null,
+    "data-type": t.type,
+    disabled: t.disabled
   }, [
     t.icon || t.loading ? (o(), h(l, {
       key: 0,
@@ -4874,12 +4884,12 @@ function ql(e, s, t, a, n, i) {
     }, null, 8, ["danger"])
   ], 10, Hl);
 }
-const x_ = /* @__PURE__ */ _(Fl, [["render", ql], ["__scopeId", "data-v-d40a7cc1"]]), $l = {
+const x_ = /* @__PURE__ */ _(Fl, [["render", ql], ["__scopeId", "data-v-b46d1d6c"]]), $l = {
   name: "ecs-button-more",
   emits: ["click"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Displays the button slightly highlighted. Should be used when the state the button triggers is currently visible. */
@@ -4943,7 +4953,7 @@ const bi = /* @__PURE__ */ _($l, [["render", jl], ["__scopeId", "data-v-91c19a75
   emits: ["click", "mouseover", "mouseleave"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Displays the button in an active state. */
@@ -5065,7 +5075,7 @@ function Zl(e, s, t, a, n, i) {
 const cs = /* @__PURE__ */ _(Xl, [["render", Zl], ["__scopeId", "data-v-743ca90b"]]), Ql = {
   name: "ecs-toolbar-icon-button",
   emits: ["click"],
-  components: { EcsIcon: O, EcsFocusRing: V },
+  components: { EcsIcon: O, EcsFocusRing: D },
   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: {
@@ -5400,7 +5410,7 @@ var xr = Sr();
 const Cr = /* @__PURE__ */ Kt(xr), Br = {
   name: "ecs-context-menu",
   emits: ["option-clicked", "menu-closed", "menu-opened"],
-  components: { EcsIcon: O, EcsFocusRing: V, EcsButton: pe },
+  components: { EcsIcon: O, EcsFocusRing: D, EcsButton: pe },
   directives: {
     clickOutSide: Cr
   },
@@ -5524,7 +5534,7 @@ function Tr(e, s, t, a, n, i) {
       ref: "menu",
       id: "my-menu"
     }, [
-      (o(!0), r(D, null, J(t.options, (v, k) => (o(), r("li", {
+      (o(!0), r(N, null, J(t.options, (v, k) => (o(), r("li", {
         key: k,
         onClick: W((E) => i.optionClicked(v), ["stop"]),
         role: v.type === "divider" ? "separator" : "menuitem",
@@ -5565,7 +5575,7 @@ function Tr(e, s, t, a, n, i) {
 const T_ = /* @__PURE__ */ _(Br, [["render", Tr], ["__scopeId", "data-v-68234afa"]]), Pr = {
   name: "ecs-collapse",
   emits: ["toggled", "remove"],
-  components: { EcsButton: pe, EcsFocusRing: V, EcsFlexRow: me, EcsIcon: O },
+  components: { EcsButton: pe, EcsFocusRing: D, EcsFlexRow: me, EcsIcon: O },
   props: {
     /** Unique ID, is required to handle persist states. */
     id: {
@@ -5678,7 +5688,7 @@ const T_ = /* @__PURE__ */ _(Br, [["render", Tr], ["__scopeId", "data-v-68234afa
   key: 0,
   class: "ecs-collapsable-headline-controls"
 }, Rr = ["id", "aria-hidden"];
-function Vr(e, s, t, a, n, i) {
+function Dr(e, s, t, a, n, i) {
   const l = g("ecs-button"), c = g("ecs-flex-row"), d = g("ecs-focus-ring"), m = g("ecs-icon");
   return o(), r("div", {
     class: y(["ecs-collapsable", [
@@ -5714,10 +5724,12 @@ function Vr(e, s, t, a, n, i) {
           class: "ecs-collapsable-headline-title"
         }, {
           default: S(() => [
-            L(w(t.title) + " ", 1),
-            t.count ? (o(), r("span", Or, "(" + w(t.count) + ")", 1)) : u("", !0)
+            p(e.$slots, "prepend", {}, void 0, !0),
+            L(" " + w(t.title) + " ", 1),
+            t.count ? (o(), r("span", Or, "(" + w(t.count) + ")", 1)) : u("", !0),
+            p(e.$slots, "append", {}, void 0, !0)
           ]),
-          _: 1
+          _: 3
         }),
         b(d, {
           inset: 0,
@@ -5756,10 +5768,10 @@ function Vr(e, s, t, a, n, i) {
     ], 10, Rr)
   ], 2);
 }
-const P_ = /* @__PURE__ */ _(Pr, [["render", Vr], ["__scopeId", "data-v-172937d7"]]), Dr = {
+const P_ = /* @__PURE__ */ _(Pr, [["render", Dr], ["__scopeId", "data-v-fc73b3d4"]]), Nr = {
   name: "ecs-collection-control",
   emits: ["toggled", "collectionTooltip"],
-  components: { EcsIcon: O, EcsFocusRing: V },
+  components: { EcsIcon: O, EcsFocusRing: D },
   mixins: [he],
   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). */
@@ -5835,7 +5847,7 @@ const P_ = /* @__PURE__ */ _(Pr, [["render", Vr], ["__scopeId", "data-v-172937d7
   created() {
     this.expandId = this.generateUniqueId();
   }
-}, Nr = ["tabindex", "role", "aria-expanded", "aria-controls"], Fr = {
+}, Vr = ["tabindex", "role", "aria-expanded", "aria-controls"], Fr = {
   key: 1,
   class: "description"
 }, Hr = ["title"], qr = { key: 0 }, $r = ["id", "aria-hidden"];
@@ -5877,13 +5889,13 @@ function Wr(e, s, t, a, n, i) {
         onMouseleave: s[1] || (s[1] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
         title: i.fullTooltip
       }, [
-        (o(!0), r(D, null, J(t.collection, (d) => (o(), r("span", {
+        (o(!0), r(N, null, J(t.collection, (d) => (o(), r("span", {
           key: d.name
         }, [
           d.value ? (o(), r("span", qr, w(d.name), 1)) : u("", !0)
         ]))), 128))
       ], 40, Hr)
-    ], 42, Nr),
+    ], 42, Vr),
     f("div", {
       class: y([n.isVisible || t.nonInteractive ? "collapse-show" : "collapse-hide", "collapse"]),
       id: t.nonInteractive ? void 0 : n.expandId,
@@ -5898,7 +5910,7 @@ function Wr(e, s, t, a, n, i) {
     ], 10, $r)
   ], 2);
 }
-const L_ = /* @__PURE__ */ _(Dr, [["render", Wr], ["__scopeId", "data-v-95f66a3d"]]), jr = {
+const L_ = /* @__PURE__ */ _(Nr, [["render", Wr], ["__scopeId", "data-v-95f66a3d"]]), jr = {
   name: "ecs-formatted",
   components: { EcsSkeletonLoader: ie },
   mixins: [he],
@@ -6226,27 +6238,27 @@ function pc() {
 }
 var vc = pc();
 const ut = /* @__PURE__ */ Kt(vc);
-var zt, Vs;
+var zt, Ds;
 function ds() {
-  if (Vs) return zt;
-  Vs = 1;
+  if (Ds) return zt;
+  Ds = 1;
   function e(s) {
     var t = typeof s;
     return s != null && (t == "object" || t == "function");
   }
   return zt = e, zt;
 }
-var It, Ds;
+var It, Ns;
 function yc() {
-  if (Ds) return It;
-  Ds = 1;
+  if (Ns) return It;
+  Ns = 1;
   var e = typeof ct == "object" && ct && ct.Object === Object && ct;
   return It = e, It;
 }
-var Et, Ns;
+var Et, Vs;
 function ki() {
-  if (Ns) return Et;
-  Ns = 1;
+  if (Vs) return Et;
+  Vs = 1;
   var e = yc(), s = typeof self == "object" && self && self.Object === Object && self, t = e || s || Function("return this")();
   return Et = t, Et;
 }
@@ -6325,28 +6337,28 @@ function xc() {
   }
   return Rt = l, Rt;
 }
-var Vt, Gs;
+var Dt, Gs;
 function Cc() {
-  if (Gs) return Vt;
+  if (Gs) return Dt;
   Gs = 1;
   function e(s) {
     return s != null && typeof s == "object";
   }
-  return Vt = e, Vt;
+  return Dt = e, Dt;
 }
-var Dt, Ks;
+var Nt, Ks;
 function Bc() {
-  if (Ks) return Dt;
+  if (Ks) return Nt;
   Ks = 1;
   var e = xc(), s = Cc(), t = "[object Symbol]";
   function a(n) {
     return typeof n == "symbol" || s(n) && e(n) == t;
   }
-  return Dt = a, Dt;
+  return Nt = a, Nt;
 }
-var Nt, Ys;
+var Vt, Ys;
 function zc() {
-  if (Ys) return Nt;
+  if (Ys) return Vt;
   Ys = 1;
   var e = kc(), s = ds(), t = Bc(), a = NaN, n = /^[-+]0x[0-9a-f]+$/i, i = /^0b[01]+$/i, l = /^0o[0-7]+$/i, c = parseInt;
   function d(m) {
@@ -6364,7 +6376,7 @@ function zc() {
     var k = i.test(m);
     return k || l.test(m) ? c(m.slice(2), k ? 2 : 8) : n.test(m) ? a : +m;
   }
-  return Nt = d, Nt;
+  return Vt = d, Vt;
 }
 var Ft, Xs;
 function Ic() {
@@ -6380,7 +6392,7 @@ function Ic() {
       var Q = v, se = k;
       return v = k = void 0, T = R, I = c.apply(se, Q), I;
     }
-    function N(R) {
+    function V(R) {
       return T = R, B = setTimeout(j, d), C ? A(R) : I;
     }
     function F(R) {
@@ -6410,7 +6422,7 @@ function Ic() {
       var R = s(), Q = H(R);
       if (v = arguments, k = this, P = R, Q) {
         if (B === void 0)
-          return N(P);
+          return V(P);
         if (M)
           return clearTimeout(B), B = setTimeout(j, d), A(P);
       }
@@ -6583,7 +6595,7 @@ const Oc = /* @__PURE__ */ _(Lc, [["render", Mc]]), Ac = {
     }
   }
 }, Rc = ["aria-valuenow"];
-function Vc(e, s, t, a, n, i) {
+function Dc(e, s, t, a, n, i) {
   return o(), r("div", {
     class: y(["ecs-hue", i.directionClass])
   }, [
@@ -6608,7 +6620,7 @@ function Vc(e, s, t, a, n, i) {
     ], 40, Rc)
   ], 2);
 }
-const Dc = /* @__PURE__ */ _(Ac, [["render", Vc]]), qt = {}, Nc = {
+const Nc = /* @__PURE__ */ _(Ac, [["render", Dc]]), qt = {}, Vc = {
   name: "Checkboard",
   props: {
     size: {
@@ -6655,7 +6667,7 @@ function qc(e, s, t, a, n, i) {
     style: x(i.bgStyle)
   }, null, 4);
 }
-const Si = /* @__PURE__ */ _(Nc, [["render", qc]]), $c = {
+const Si = /* @__PURE__ */ _(Vc, [["render", qc]]), $c = {
   name: "Alpha",
   props: {
     modelValue: Object,
@@ -6731,7 +6743,7 @@ const Gc = /* @__PURE__ */ _($c, [["render", Uc]]), Kc = {
   mixins: [rc],
   components: {
     saturation: Oc,
-    hue: Dc,
+    hue: Nc,
     alpha: Gc,
     "ed-in": hc,
     checkboard: Si
@@ -6926,7 +6938,7 @@ function rd(e, s, t, a, n, i) {
       role: "group",
       "aria-label": "A color preset, pick one to set as current color"
     }, [
-      (o(!0), r(D, null, J(t.swatches, (k) => (o(), r(D, null, [
+      (o(!0), r(N, null, J(t.swatches, (k) => (o(), r(N, null, [
         e.isTransparent(k.hex) ? (o(), r("div", {
           key: "else-" + k.id,
           "aria-label": k.title,
@@ -7044,7 +7056,7 @@ function dd(e, s, t, a, n, i) {
 }
 const A_ = /* @__PURE__ */ _(cd, [["render", dd], ["__scopeId", "data-v-08aaa823"]]), ud = {
   name: "ecs-data-card",
-  components: { EcsIcon: O, EcsSkeletonLoader: ie, EcsButtonTable: rs, EcsButton: pe, EcsFocusRing: V },
+  components: { EcsIcon: O, EcsSkeletonLoader: ie, EcsButtonTable: rs, EcsButton: pe, EcsFocusRing: D },
   mixins: [he],
   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). */
@@ -7258,7 +7270,7 @@ function wd(e, s, t, a, n, i) {
     p(e.$slots, "default")
   ]);
 }
-const V_ = /* @__PURE__ */ _(_d, [["render", wd]]), Sd = {
+const D_ = /* @__PURE__ */ _(_d, [["render", wd]]), Sd = {
   name: "ecs-party-entry",
   components: { EcsIcon: O, EcsSticker: We },
   props: {
@@ -7703,7 +7715,7 @@ function Md(e, s, t, a, n, i) {
     ], 2)
   ]);
 }
-const D_ = /* @__PURE__ */ _(zd, [["render", Md], ["__scopeId", "data-v-78507101"]]), Od = {
+const N_ = /* @__PURE__ */ _(zd, [["render", Md], ["__scopeId", "data-v-78507101"]]), Od = {
   name: "ecs-data-grid",
   emits: ["tableScroll"],
   props: {
@@ -7747,11 +7759,11 @@ const D_ = /* @__PURE__ */ _(zd, [["render", Md], ["__scopeId", "data-v-78507101
 }, Ad = ["aria-disabled"], Rd = {
   key: 0,
   class: "ecs-data-grid-empty"
-}, Vd = {
+}, Dd = {
   key: 2,
   class: "ecs-data-grid-pagination"
 };
-function Dd(e, s, t, a, n, i) {
+function Nd(e, s, t, a, n, i) {
   return o(), r("div", {
     onScroll: s[0] || (s[0] = (...l) => i.tableScroll && i.tableScroll(...l)),
     ref: "dataGridScroller",
@@ -7782,12 +7794,12 @@ function Dd(e, s, t, a, n, i) {
     }, [
       p(e.$slots, "default", {}, void 0, !0)
     ], 2)),
-    e.$slots.pagination ? (o(), r("div", Vd, [
+    e.$slots.pagination ? (o(), r("div", Dd, [
       p(e.$slots, "pagination", {}, void 0, !0)
     ])) : u("", !0)
   ], 42, Ad);
 }
-const N_ = /* @__PURE__ */ _(Od, [["render", Dd], ["__scopeId", "data-v-60369c9b"]]), Nd = {
+const V_ = /* @__PURE__ */ _(Od, [["render", Nd], ["__scopeId", "data-v-60369c9b"]]), Vd = {
   name: "ecs-data-grid-row",
   emits: ["rowdrop", "click", "contextmenu", "dblclick", "collapse"],
   props: {
@@ -7869,7 +7881,7 @@ function Hd(e, s, t, a, n, i) {
     p(e.$slots, "default", {}, void 0, !0)
   ], 2);
 }
-const qd = /* @__PURE__ */ _(Nd, [["render", Hd], ["__scopeId", "data-v-ae6888e6"]]), $d = {
+const qd = /* @__PURE__ */ _(Vd, [["render", Hd], ["__scopeId", "data-v-ae6888e6"]]), $d = {
   name: "ecs-data-grid-row-group",
   emits: ["toggle"],
   components: {
@@ -8045,7 +8057,7 @@ const Ci = /* @__PURE__ */ _(Gd, [["render", Jd], ["__scopeId", "data-v-ca96e231
   components: {
     EcsIcon: O,
     EcsSelect: Ci,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Sets the width of the column. If a Number is passed, the width will be set to the number pixel value. If a String is passed, you can make use of percentage values. It's also possible to set the width to use flex sizing by passing `flex`. **Never use a String value when the cell should be resizable, or fixed.** */
@@ -8356,7 +8368,7 @@ function mu(e, s, t, a, n, i) {
         type: "invisible"
       }, {
         default: S(() => [
-          (o(!0), r(D, null, J(t.select, (m, v) => (o(), r("option", {
+          (o(!0), r(N, null, J(t.select, (m, v) => (o(), r("option", {
             key: v,
             selected: m.selected,
             value: m.value
@@ -8857,19 +8869,38 @@ const j_ = /* @__PURE__ */ _(zu, [["render", Lu], ["__scopeId", "data-v-133b00b9
       const s = this.$el.querySelectorAll(".ecs-dialog-footer button"), t = s[s.length - 1];
       e.preventDefault(), t.click();
     },
-    setFocusableElements() {
-      this.focusableElements = Array.from(this.$el.querySelectorAll(
+    getFocusableElements() {
+      return Array.from(this.$el.querySelectorAll(
         'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      ));
+      )).filter((e) => !e.disabled);
+    },
+    getDialogButtons() {
+      return Array.from(this.$el.querySelectorAll(".ecs-dialog-footer button[data-type]")).filter((e) => !e.disabled);
+    },
+    setFocusableElements() {
+      this.focusableElements = this.getFocusableElements();
+    },
+    findElementToFocus() {
+      const e = this.getFocusableElements(), s = this.$el.querySelector(".ecs-dialog-footer");
+      for (const l of e) {
+        const c = s && !(l.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_FOLLOWING), d = l.closest(".ecs-dialog-footer");
+        if (!c && !d)
+          return l;
+      }
+      const t = this.getDialogButtons();
+      if (!t.length) return this.$refs.dialog;
+      const a = t.find((l) => l.dataset.type === "danger"), n = t.find((l) => l.dataset.type === "confirm"), i = t.find((l) => l.dataset.type === "cancel");
+      return a && i ? i : n || t[0] || this.$refs.dialog;
     },
     focusFirstElement() {
-      this.focusableElements.length ? this.focusableElements[0].focus() : this.$refs.dialog.focus();
+      const e = this.findElementToFocus();
+      e ? e.focus() : this.$refs.dialog.focus();
     }
   },
   watch: {
     show() {
-      this.isShown = this.show, this.isShown ? (this.lazyLoad = !0, this.$nextTick(() => {
-        this.$refs.dialog.showModal ? this.$refs.dialog.showModal() : this.$refs.dialog.setAttribute("open", ""), document.addEventListener("keyup", this.keyUpHandler), this.setFocusableElements(), this.focusFirstElement();
+      this.isShown = this.show, this.isShown ? (this.lazyLoad = !0, this.$nextTick(async () => {
+        this.$refs.dialog.showModal ? this.$refs.dialog.showModal() : this.$refs.dialog.setAttribute("open", ""), await new Promise((e) => setTimeout(e, 0)), this.focusFirstElement(), document.addEventListener("keyup", this.keyUpHandler), this.setFocusableElements();
       })) : (this.$refs.dialog.close ? this.$refs.dialog.close() : this.$refs.dialog.removeAttribute("open"), this.$nextTick(() => {
         this.lazyLoad = !1;
       }), document.removeEventListener("keyup", this.keyUpHandler));
@@ -8885,8 +8916,8 @@ const j_ = /* @__PURE__ */ _(zu, [["render", Lu], ["__scopeId", "data-v-133b00b9
   mounted() {
     this.keyUpHandler = (e) => {
       this.isShown && e.key === "Escape" && (e.preventDefault(), this.$emit("cancel"));
-    }, this.show && (this.isShown = !0, this.lazyLoad = !0, this.$nextTick(() => {
-      this.$refs.dialog.showModal ? this.$refs.dialog.showModal() : this.$refs.dialog.setAttribute("open", ""), document.addEventListener("keyup", this.keyUpHandler), this.$refs.dialog.focus();
+    }, this.show && (this.isShown = !0, this.lazyLoad = !0, this.$nextTick(async () => {
+      this.$refs.dialog.showModal ? this.$refs.dialog.showModal() : this.$refs.dialog.setAttribute("open", ""), await new Promise((e) => setTimeout(e, 0)), this.focusFirstElement(), document.addEventListener("keyup", this.keyUpHandler), this.setFocusableElements();
     }));
   }
 }, Ou = { class: "ecs-dialog-body scrollbar scrollbar-sml" };
@@ -8982,10 +9013,10 @@ const U_ = /* @__PURE__ */ _(Mu, [["render", Au]]), Ru = {
       }, null, 8, ["height", "width", "data-test-icon-type"]))
     ], 6));
   }
-}, Vu = /* @__PURE__ */ _(Ru, [["__scopeId", "data-v-e2fbdf1b"]]), Du = {
+}, Du = /* @__PURE__ */ _(Ru, [["__scopeId", "data-v-e2fbdf1b"]]), Nu = {
   name: "ecs-dialog-header",
   components: {
-    EcsStateIcon: Vu
+    EcsStateIcon: Du
   },
   props: {
     /** Adds an icon to the dialog header. The prop value 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). Only icons prefixed with `dialog` should be used here. */
@@ -9000,7 +9031,7 @@ const U_ = /* @__PURE__ */ _(Mu, [["render", Au]]), Ru = {
       default: "neutral"
     }
   }
-}, Nu = {
+}, Vu = {
   key: 0,
   class: "ecs-dialog-headline"
 }, Fu = {
@@ -9010,7 +9041,7 @@ const U_ = /* @__PURE__ */ _(Mu, [["render", Au]]), Ru = {
 function Hu(e, s, t, a, n, i) {
   const l = g("ecs-state-icon");
   return o(), r("div", null, [
-    t.icon ? (o(), r("h3", Nu, [
+    t.icon ? (o(), r("h3", Vu, [
       b(l, {
         type: t.icon,
         "icon-color": t.iconColor
@@ -9021,7 +9052,7 @@ function Hu(e, s, t, a, n, i) {
     ]))
   ]);
 }
-const G_ = /* @__PURE__ */ _(Du, [["render", Hu], ["__scopeId", "data-v-6e05c98b"]]), qu = {
+const G_ = /* @__PURE__ */ _(Nu, [["render", Hu], ["__scopeId", "data-v-6e05c98b"]]), qu = {
   __name: "favicon",
   props: {
     /** The identifier of the favicon which should show up. */
@@ -9437,7 +9468,7 @@ const vf = /* @__PURE__ */ _(mf, [["render", pf], ["__scopeId", "data-v-1b81f485
     EcsSkeletonLoader: ie,
     EcsProgress: vf,
     EcsButton: pe,
-    EcsFocusRing: V,
+    EcsFocusRing: D,
     EcsFlexRow: me,
     EcsSticker: We,
     EcsTextV2: Te
@@ -9620,7 +9651,7 @@ function Bf(e, s, t, a, n, i) {
           width: 100,
           class: "ecs-dropzone-skeleton"
         })) : (o(), r("div", kf, [
-          e.$slots.customlabel ? u("", !0) : (o(), r(D, { key: 0 }, [
+          e.$slots.customlabel ? u("", !0) : (o(), r(N, { key: 0 }, [
             L(" Drag and drop your " + w(t.fileTypeLabel) + " or ", 1),
             f("i", {
               onClick: s[1] || (s[1] = (...B) => i.browseFile && i.browseFile(...B)),
@@ -9766,7 +9797,7 @@ const Z_ = /* @__PURE__ */ _(zf, [["render", If], ["__scopeId", "data-v-05133d05
     EcsIcon: O,
     EcsSticker: We,
     EcsButtonMore: bi,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   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). */
@@ -9938,7 +9969,7 @@ const Q_ = /* @__PURE__ */ _(Ef, [["render", Of], ["__scopeId", "data-v-0b6f41c6
         return `max-height: ${this.maxHeight}; overflow: auto;`;
     }
   }
-}, Rf = { class: "ecs-excerpt-title" }, Vf = { class: "ecs-excerpt-title-headline" }, Df = { key: 3 }, Nf = {
+}, Rf = { class: "ecs-excerpt-title" }, Df = { class: "ecs-excerpt-title-headline" }, Nf = { key: 3 }, Vf = {
   key: 0,
   class: "ecs-excerpt-title-cite"
 }, Ff = { key: 1 }, Hf = {
@@ -9957,7 +9988,7 @@ function Wf(e, s, t, a, n, i) {
     class: y(["ecs-excerpt-snippet", i.sizeClass])
   }, [
     f("div", Rf, [
-      f("div", Vf, [
+      f("div", Df, [
         t.icon && t.loading ? (o(), h(l, {
           key: 0,
           type: "rect",
@@ -9973,9 +10004,9 @@ function Wf(e, s, t, a, n, i) {
           key: 2,
           type: "single",
           width: 20
-        })) : (o(), r("span", Df, w(t.headline), 1))
+        })) : (o(), r("span", Nf, w(t.headline), 1))
       ]),
-      t.cite ? (o(), r("div", Nf, [
+      t.cite ? (o(), r("div", Vf, [
         t.loading ? (o(), h(l, {
           key: 0,
           type: "single",
@@ -9991,7 +10022,7 @@ function Wf(e, s, t, a, n, i) {
         key: 0,
         type: "multi",
         count: 3
-      })) : (o(), r(D, { key: 1 }, [
+      })) : (o(), r(N, { key: 1 }, [
         t.type == "formatted" ? (o(), h(d, {
           key: 0,
           small: i.smallFormatted
@@ -10835,7 +10866,7 @@ function wg(e, s, t, a, n, i) {
           f("div", {
             class: y(["sticker-content", { "read-only": t.readOnly }])
           }, [
-            (o(!0), r(D, null, J(n.localSticker.text, (T, C) => (o(), r("div", {
+            (o(!0), r(N, null, J(n.localSticker.text, (T, C) => (o(), r("div", {
               key: C,
               class: "line"
             }, [
@@ -10859,7 +10890,7 @@ function wg(e, s, t, a, n, i) {
           })
         }, [
           f("div", gg, [
-            (o(!0), r(D, null, J(n.localSticker.text, (T, C) => (o(), r("div", {
+            (o(!0), r(N, null, J(n.localSticker.text, (T, C) => (o(), r("div", {
               key: C,
               class: y(["line editable", { focused: i.isLineFocused(C) }]),
               ref_for: !0,
@@ -11050,7 +11081,7 @@ function wg(e, s, t, a, n, i) {
                       ])),
                       _: 1
                     }),
-                    (o(!0), r(D, null, J(t.variables, (T) => (o(), h(B, {
+                    (o(!0), r(N, null, J(t.variables, (T) => (o(), h(B, {
                       key: T.variable,
                       help: T.value,
                       onClick: (C) => i.insertVariable(T.variable)
@@ -11164,7 +11195,7 @@ const ik = /* @__PURE__ */ _(Sg, [["render", Cg]]), Bg = {
     EcsFileIcon: as,
     EcsSticker: We,
     EcsButtonTable: rs,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   mixins: [he],
   props: {
@@ -11289,10 +11320,10 @@ const ik = /* @__PURE__ */ _(Sg, [["render", Cg]]), Bg = {
 }, Lg = ["aria-controls", "aria-expanded", "aria-label", "disabled"], Mg = ["aria-valuenow"], Og = ["id"], Ag = {
   key: 0,
   class: "list"
-}, Rg = ["id"], Vg = {
+}, Rg = ["id"], Dg = {
   key: 0,
   class: "list"
-}, Dg = ["id", "aria-hidden"], Ng = ["id"], Fg = {
+}, Ng = ["id", "aria-hidden"], Vg = ["id"], Fg = {
   ref: "edit",
   class: "ecs-file-list-entry-edit"
 };
@@ -11387,8 +11418,8 @@ function Hg(e, s, t, a, n, i) {
       id: n.errorId
     }, [
       Array.isArray(t.error) ? (o(), r("ul", Ag, [
-        (o(!0), r(D, null, J(t.error, (k, E) => (o(), r("li", { key: E }, w(k), 1))), 128))
-      ])) : (o(), r(D, { key: 1 }, [
+        (o(!0), r(N, null, J(t.error, (k, E) => (o(), r("li", { key: E }, w(k), 1))), 128))
+      ])) : (o(), r(N, { key: 1 }, [
         L(w(t.error), 1)
       ], 64))
     ], 8, Og)) : u("", !0),
@@ -11397,9 +11428,9 @@ function Hg(e, s, t, a, n, i) {
       class: "warning",
       id: n.warningId
     }, [
-      Array.isArray(t.warning) ? (o(), r("ul", Vg, [
-        (o(!0), r(D, null, J(t.warning, (k, E) => (o(), r("li", { key: E }, w(k), 1))), 128))
-      ])) : (o(), r(D, { key: 1 }, [
+      Array.isArray(t.warning) ? (o(), r("ul", Dg, [
+        (o(!0), r(N, null, J(t.warning, (k, E) => (o(), r("li", { key: E }, w(k), 1))), 128))
+      ])) : (o(), r(N, { key: 1 }, [
         L(w(t.warning), 1)
       ], 64))
     ], 8, Rg)) : u("", !0),
@@ -11410,7 +11441,7 @@ function Hg(e, s, t, a, n, i) {
       "aria-hidden": n.isVisible ? "false" : "true"
     }, [
       p(e.$slots, "collapse", {}, void 0, !0)
-    ], 10, Dg)) : u("", !0),
+    ], 10, Ng)) : u("", !0),
     b(_e, { name: "edit" }, {
       default: S(() => [
         e.$slots.edit && t.edit ? (o(), r("div", {
@@ -11421,7 +11452,7 @@ function Hg(e, s, t, a, n, i) {
           f("div", Fg, [
             p(e.$slots, "edit", {}, void 0, !0)
           ], 512)
-        ], 12, Ng)) : u("", !0)
+        ], 12, Vg)) : u("", !0)
       ]),
       _: 3
     })
@@ -11536,7 +11567,7 @@ const Ug = /* @__PURE__ */ _(Wg, [["render", jg], ["__scopeId", "data-v-1d2ad846
   emits: ["click"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Adds a tooltip to the clear button. */
@@ -11702,7 +11733,7 @@ function em(e, s, t, a, n, i) {
     }, null, 8, ["onClick", "loading"])) : u("", !0)
   ], 2);
 }
-const tm = /* @__PURE__ */ _(Zg, [["render", em], ["__scopeId", "data-v-a4d99429"]]), sm = {
+const tm = /* @__PURE__ */ _(Zg, [["render", em], ["__scopeId", "data-v-5f9bc8e4"]]), sm = {
   name: "ecs-scroll-container",
   props: {
     /** Sets the maximum height of the scroll container. Can be any CSS value, such as px, %, or em. */
@@ -12308,7 +12339,7 @@ function Rm(e, s, t, a, n, i) {
     }, null, 8, ["type"])
   ], 6);
 }
-const uk = /* @__PURE__ */ _(Am, [["render", Rm], ["__scopeId", "data-v-ba171c2e"]]), Vm = {
+const uk = /* @__PURE__ */ _(Am, [["render", Rm], ["__scopeId", "data-v-ba171c2e"]]), Dm = {
   name: "ecs-input-group-addon",
   components: { EcsIcon: O },
   props: {
@@ -12328,7 +12359,7 @@ const uk = /* @__PURE__ */ _(Am, [["render", Rm], ["__scopeId", "data-v-ba171c2e
     }
   }
 };
-function Dm(e, s, t, a, n, i) {
+function Nm(e, s, t, a, n, i) {
   const l = g("ecs-icon");
   return o(), r("span", {
     class: y(["ecs-input-group-addon", [i.iconClass, t.button ? "has-button" : ""]])
@@ -12342,13 +12373,13 @@ function Dm(e, s, t, a, n, i) {
     }, null, 8, ["type"])) : u("", !0)
   ], 2);
 }
-const fk = /* @__PURE__ */ _(Vm, [["render", Dm]]), Nm = {
+const fk = /* @__PURE__ */ _(Dm, [["render", Nm]]), Vm = {
   name: "ecs-input-connector"
 }, Fm = { class: "ecs-input-group-addon connector" };
 function Hm(e, s, t, a, n, i) {
   return o(), r("span", Fm);
 }
-const gk = /* @__PURE__ */ _(Nm, [["render", Hm]]), qm = {
+const gk = /* @__PURE__ */ _(Vm, [["render", Hm]]), qm = {
   name: "ecs-input-float",
   emits: ["input"],
   mixins: [he],
@@ -12829,7 +12860,7 @@ const yk = /* @__PURE__ */ _(ih, [["render", rh], ["__scopeId", "data-v-0b163531
 function wh(e, s, t, a, n, i) {
   return o(), r("div", dh, [
     f("div", uh, [
-      i.showAltPageNumbers ? (o(), r(D, { key: 0 }, [
+      i.showAltPageNumbers ? (o(), r(N, { key: 0 }, [
         f("div", fh, [
           f("div", {
             onClick: s[0] || (s[0] = (l) => e.$emit("selectCurPageText")),
@@ -13355,11 +13386,11 @@ const _k = /* @__PURE__ */ _(zh, [["render", Ph], ["__scopeId", "data-v-b5617b26
 }, Mh = { class: "ecs-directory-layout" }, Oh = { class: "ecs-directory-layout-wrap" }, Ah = { class: "ecs-directory-layout-contents" }, Rh = {
   key: 0,
   class: "ecs-directory-layout-directory"
-}, Vh = {
+}, Dh = {
   key: 1,
   class: "ecs-directory-layout-sidebar"
 };
-function Dh(e, s, t, a, n, i) {
+function Nh(e, s, t, a, n, i) {
   return o(), r("div", Mh, [
     p(e.$slots, "toolbar", {}, void 0, !0),
     p(e.$slots, "action-toolbar", {}, void 0, !0),
@@ -13373,14 +13404,14 @@ function Dh(e, s, t, a, n, i) {
         }, [
           p(e.$slots, "default", {}, void 0, !0)
         ], 2),
-        e.$slots.sidebar ? (o(), r("div", Vh, [
+        e.$slots.sidebar ? (o(), r("div", Dh, [
           p(e.$slots, "sidebar", {}, void 0, !0)
         ])) : u("", !0)
       ])
     ])
   ]);
 }
-const kk = /* @__PURE__ */ _(Lh, [["render", Dh], ["__scopeId", "data-v-f5afc4e6"]]), us = {
+const kk = /* @__PURE__ */ _(Lh, [["render", Nh], ["__scopeId", "data-v-f5afc4e6"]]), us = {
   name: "ecs-layout-data-table",
   components: { EcsActionToolbar: on, EcsButton: pe },
   mixins: [he],
@@ -13432,7 +13463,7 @@ const kk = /* @__PURE__ */ _(Lh, [["render", Dh], ["__scopeId", "data-v-f5afc4e6
   }));
 }, Qs = us.setup;
 us.setup = Qs ? (e, s) => (Zs(), Qs(e, s)) : Zs;
-const Nh = { class: "ecs-data-layout-content" }, Fh = {
+const Vh = { class: "ecs-data-layout-content" }, Fh = {
   key: 0,
   role: "toolbar",
   "aria-label": "Main",
@@ -13446,7 +13477,7 @@ function Uh(e, s, t, a, n, i) {
   return o(), r("div", {
     class: y(["ecs-data-layout", t.leftBorder ? "left-border" : ""])
   }, [
-    f("main", Nh, [
+    f("main", Vh, [
       e.$slots.toolbar ? (o(), r("div", Fh, [
         p(e.$slots, "toolbar", {}, void 0, !0),
         e.$slots.statistics ? (o(), h(l, {
@@ -13508,7 +13539,7 @@ const wk = /* @__PURE__ */ _(us, [["render", Uh], ["__scopeId", "data-v-b579f92f
   emits: ["click"],
   components: {
     EcsFlexRow: me,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Determines the type of legend message. */
@@ -13707,7 +13738,7 @@ function ip(e, s, t, a, n, i) {
 }
 const xk = /* @__PURE__ */ _(Zh, [["render", ip], ["__scopeId", "data-v-e0610fe5"]]), np = {
   name: "ecs-map",
-  components: { EcsFocusRing: V },
+  components: { EcsFocusRing: D },
   props: {
     /** Address of the location, needs to be known by Google Maps. */
     address: {
@@ -13839,7 +13870,7 @@ const Bk = /* @__PURE__ */ _(rp, [["render", fp], ["__scopeId", "data-v-185a1041
   emits: ["close"],
   components: {
     EcsButton: pe,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Sets the visual style of the modal header. Tabs should always be used when the modal tab header contains a tab bar, while Scroll can be used as an optional indicator for scrollable modals with long contents. */
@@ -13924,7 +13955,7 @@ function wp(e, s, t, a, n, i) {
 const Ik = /* @__PURE__ */ _(yp, [["render", wp], ["__scopeId", "data-v-206d1ced"]]), Sp = {
   name: "ecs-select-text",
   emits: ["change", "focus", "blur"],
-  components: { EcsIcon: O, EcsFocusRing: V },
+  components: { EcsIcon: O, EcsFocusRing: D },
   props: {
     /** Determines the size of the select control. */
     size: {
@@ -14031,7 +14062,7 @@ const Bp = /* @__PURE__ */ _(Sp, [["render", Cp], ["__scopeId", "data-v-e4819f41
   emits: ["remove", "change", "operatorChange", "operatorToggle"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V,
+    EcsFocusRing: D,
     EcsSelectText: Bp
   },
   props: {
@@ -14117,7 +14148,7 @@ function Mp(e, s, t, a, n, i) {
         class: "operator-select"
       }, {
         default: S(() => [
-          (o(!0), r(D, null, J(t.operatorSelectOptions, (m) => (o(), r("option", {
+          (o(!0), r(N, null, J(t.operatorSelectOptions, (m) => (o(), r("option", {
             value: m,
             key: m
           }, w(m), 9, Tp))), 128))
@@ -14171,7 +14202,7 @@ const Ek = /* @__PURE__ */ _(zp, [["render", Mp], ["__scopeId", "data-v-c3c80822
   emits: ["remove"],
   components: {
     EcsIcon: O,
-    EcsFocusRing: V
+    EcsFocusRing: D
   }
 };
 function Ap(e, s, t, a, n, i) {
@@ -14222,8 +14253,8 @@ const Tk = /* @__PURE__ */ _(Op, [["render", Ap], ["__scopeId", "data-v-daa501d2
       return `ecs-multiselect-option-${this.type}`;
     }
   }
-}, Vp = ["role"], Dp = { class: "ecs-multiselect-option-content-text" };
-function Np(e, s, t, a, n, i) {
+}, Dp = ["role"], Np = { class: "ecs-multiselect-option-content-text" };
+function Vp(e, s, t, a, n, i) {
   const l = g("ecs-icon"), c = g("ecs-flex-row"), d = g("ecs-text-v2");
   return o(), r("div", {
     class: y(["ecs-multiselect-option", i.typeClass]),
@@ -14239,7 +14270,7 @@ function Np(e, s, t, a, n, i) {
           type: t.icon,
           size: "20"
         }, null, 8, ["type"])) : u("", !0),
-        f("span", Dp, [
+        f("span", Np, [
           p(e.$slots, "default", {}, void 0, !0)
         ])
       ]),
@@ -14256,9 +14287,9 @@ function Np(e, s, t, a, n, i) {
         _: 1
       })
     ], 2)) : u("", !0)
-  ], 10, Vp);
+  ], 10, Dp);
 }
-const Pk = /* @__PURE__ */ _(Rp, [["render", Np], ["__scopeId", "data-v-28a5fa28"]]), Fp = {
+const Pk = /* @__PURE__ */ _(Rp, [["render", Vp], ["__scopeId", "data-v-28a5fa28"]]), Fp = {
   name: "ecs-overlay",
   emits: ["close", "toggled"],
   components: { EcsIcon: O, EcsButtonToolbar: yt, EcsAlert: ni },
@@ -14675,7 +14706,7 @@ function cv(e, s, t, a, n, i) {
       style: x({ minWidth: t.tabsSpacing - 4 + "px" })
     }, {
       default: S(() => [
-        t.type == "paginated" ? (o(), r(D, { key: 0 }, [
+        t.type == "paginated" ? (o(), r(N, { key: 0 }, [
           b(c, null, {
             default: S(() => [
               b(l, {
@@ -14711,7 +14742,7 @@ function cv(e, s, t, a, n, i) {
                 size: "sml"
               }, {
                 default: S(() => [
-                  (o(!0), r(D, null, J(t.totalPages, (m) => (o(), r("option", {
+                  (o(!0), r(N, null, J(t.totalPages, (m) => (o(), r("option", {
                     key: m,
                     value: m,
                     selected: m === t.currentPage
@@ -14775,7 +14806,7 @@ function cv(e, s, t, a, n, i) {
           size: "sml"
         }, {
           default: S(() => [
-            (o(!0), r(D, null, J(t.itemsPerPage, (m) => (o(), r("option", {
+            (o(!0), r(N, null, J(t.itemsPerPage, (m) => (o(), r("option", {
               key: m,
               value: m,
               selected: m === t.itemsPerPageSelected
@@ -15002,7 +15033,7 @@ function xv(e, s, t, a, n, i) {
 const Cv = /* @__PURE__ */ _(kv, [["render", xv], ["__scopeId", "data-v-a6e15633"]]), Bv = {
   name: "ecs-quicklinks-link",
   emits: ["click", "input", "toggle", "update:volumes"],
-  components: { EcsCheckbox: vt, EcsRatingStarRead: _v, EcsRatingFavorability: Cv, EcsSwitch: hi, EcsIcon: O, EcsFocusRing: V, EcsAvatar: nt, EcsFlexRow: me, EcsPopover: pt, EcsPopoverList: is, EcsPopoverListItem: os },
+  components: { EcsCheckbox: vt, EcsRatingStarRead: _v, EcsRatingFavorability: Cv, EcsSwitch: hi, EcsIcon: O, EcsFocusRing: D, EcsAvatar: nt, EcsFlexRow: me, EcsPopover: pt, EcsPopoverList: is, EcsPopoverListItem: os },
   props: {
     /** The label text for the quicklink. */
     label: {
@@ -15140,7 +15171,7 @@ const Cv = /* @__PURE__ */ _(kv, [["render", xv], ["__scopeId", "data-v-a6e15633
 }, Ev = { key: 0 }, Tv = ["title"], Pv = { style: { "margin-left": "12px" } }, Lv = { class: "static-label" }, Mv = {
   key: 0,
   class: "meta"
-}, Ov = { key: 0 }, Av = ["title"], Rv = { class: "persona-label" }, Vv = { key: 3 }, Dv = ["onClick", "title", "aria-label"], Nv = ["aria-label"], Fv = {
+}, Ov = { key: 0 }, Av = ["title"], Rv = { class: "persona-label" }, Dv = { key: 3 }, Nv = ["onClick", "title", "aria-label"], Vv = ["aria-label"], Fv = {
   key: 5,
   class: "meta"
 }, Hv = { key: 0 }, qv = ["title"];
@@ -15218,7 +15249,7 @@ function $v(e, s, t, a, n, i) {
             L(w(t.label), 1)
           ]),
           _: 1
-        }, 8, ["value", "disabled"])) : t.type === "persona" ? (o(), r(D, { key: 2 }, [
+        }, 8, ["value", "disabled"])) : t.type === "persona" ? (o(), r(N, { key: 2 }, [
           b(k, {
             image: t.persona.image,
             name: t.persona.name,
@@ -15226,20 +15257,20 @@ function $v(e, s, t, a, n, i) {
             size: 24
           }, null, 8, ["image", "name", "relevant-badge"]),
           f("span", Rv, w(t.label || t.persona.name), 1)
-        ], 64)) : (o(), r("span", Vv, w(t.label), 1)),
+        ], 64)) : (o(), r("span", Dv, w(t.label), 1)),
         n.localVolumes ? (o(), h(P, {
           key: 4,
           gap: 2,
           class: "volume-list"
         }, {
           default: S(() => [
-            (o(!0), r(D, null, J(i.displayedVolumes, (C) => (o(), r("button", {
+            (o(!0), r(N, null, J(i.displayedVolumes, (C) => (o(), r("button", {
               key: C.id,
               class: y(["volume", { active: C.active }]),
               onClick: (M) => i.toggleVolume(C.id),
               title: `${C.name} (${C.date})`,
               "aria-label": `Volume ${C.id}${C.active ? " active" : ""}`
-            }, w(C.id), 11, Dv))), 128)),
+            }, w(C.id), 11, Nv))), 128)),
             n.localVolumes.length > 3 ? (o(), h(B, {
               key: 0,
               disabled: t.disabled || null
@@ -15247,7 +15278,7 @@ function $v(e, s, t, a, n, i) {
               content: S(() => [
                 b(I, null, {
                   default: S(() => [
-                    (o(!0), r(D, null, J(n.localVolumes.slice(3), (C) => (o(), h(E, {
+                    (o(!0), r(N, null, J(n.localVolumes.slice(3), (C) => (o(), h(E, {
                       key: C.id,
                       onClick: (M) => i.toggleVolume(C.id),
                       selected: C.active,
@@ -15273,7 +15304,7 @@ function $v(e, s, t, a, n, i) {
                     type: "more",
                     size: "18"
                   })
-                ], 10, Nv)
+                ], 10, Vv)
               ]),
               _: 1
             }, 8, ["disabled"])) : u("", !0)
@@ -15390,13 +15421,13 @@ function Kv(e, s, t, a, n, i) {
       class: "ecs-range-input"
     }, null, 40, jv),
     i.shouldShowMarkers ? (o(), r("div", Uv, [
-      (o(!0), r(D, null, J(i.stepCount, (l, c) => (o(), r("span", {
+      (o(!0), r(N, null, J(i.stepCount, (l, c) => (o(), r("span", {
         key: c,
         class: "ecs-range-marker"
       }))), 128))
     ])) : u("", !0),
     t.list ? (o(), r("div", Gv, [
-      (o(!0), r(D, null, J(t.list, (l, c) => (o(), r("span", {
+      (o(!0), r(N, null, J(t.list, (l, c) => (o(), r("span", {
         key: c,
         class: "ecs-range-label"
       }, w(l), 1))), 128))
@@ -15482,7 +15513,7 @@ function sy(e, s, t, a, n, i) {
     ])
   ], 2);
 }
-const Vk = /* @__PURE__ */ _(Yv, [["render", sy], ["__scopeId", "data-v-0d4c1ecb"]]), iy = {
+const Dk = /* @__PURE__ */ _(Yv, [["render", sy], ["__scopeId", "data-v-0d4c1ecb"]]), iy = {
   name: "ecs-section",
   props: {
     /** Adds a headline to the section. */
@@ -15563,7 +15594,7 @@ function ay(e, s, t, a, n, i) {
     ], 2)
   ], 2);
 }
-const Dk = /* @__PURE__ */ _(iy, [["render", ay], ["__scopeId", "data-v-cdcc0680"]]), oy = {
+const Nk = /* @__PURE__ */ _(iy, [["render", ay], ["__scopeId", "data-v-cdcc0680"]]), oy = {
   name: "ecs-segments",
   emits: ["click"],
   components: { EcsIcon: O },
@@ -15602,7 +15633,7 @@ function dy(e, s, t, a, n, i) {
   return o(), r("div", {
     class: y(["ecs-segments", [t.inline ? "ecs-segments-inline" : ""]])
   }, [
-    (o(!0), r(D, null, J(t.options, (c) => (o(), r("label", {
+    (o(!0), r(N, null, J(t.options, (c) => (o(), r("label", {
       key: c.id,
       for: c.id,
       disabled: t.disabled
@@ -15632,7 +15663,7 @@ function dy(e, s, t, a, n, i) {
     ], 8, ly))), 128))
   ], 2);
 }
-const Nk = /* @__PURE__ */ _(oy, [["render", dy], ["__scopeId", "data-v-1cb14db0"]]), uy = {
+const Vk = /* @__PURE__ */ _(oy, [["render", dy], ["__scopeId", "data-v-1cb14db0"]]), uy = {
   name: "ecs-selection-grid",
   emits: ["update:modelValue"],
   components: {
@@ -15699,7 +15730,7 @@ function my(e, s, t, a, n, i) {
       "--grid-columns": t.columns
     })
   }, [
-    (o(!0), r(D, null, J(t.options, (v) => (o(), r("button", {
+    (o(!0), r(N, null, J(t.options, (v) => (o(), r("button", {
       onClick: (k) => i.handleSelect(v.value),
       key: v.value,
       class: y([
@@ -15752,7 +15783,7 @@ const Fk = /* @__PURE__ */ _(uy, [["render", my], ["__scopeId", "data-v-8b0a7154
   name: "ecs-select-tile",
   emits: ["click"],
   components: {
-    EcsFocusRing: V,
+    EcsFocusRing: D,
     EcsIllustration: Cm
   },
   props: {
@@ -15841,7 +15872,7 @@ function wy(e, s, t, a, n, i) {
 const qk = /* @__PURE__ */ _(_y, [["render", wy], ["__scopeId", "data-v-69c3c73d"]]), Sy = {
   name: "ecs-sequence-map-button",
   emits: ["click"],
-  components: { EcsIcon: O, EcsFocusRing: V },
+  components: { EcsIcon: O, EcsFocusRing: D },
   props: {
     /** Index of the step. */
     step: {
@@ -16012,7 +16043,7 @@ function Ry(e, s, t, a, n, i) {
     })
   ], 6);
 }
-const Wk = /* @__PURE__ */ _(Oy, [["render", Ry], ["__scopeId", "data-v-0f7679c6"]]), Vy = {
+const Wk = /* @__PURE__ */ _(Oy, [["render", Ry], ["__scopeId", "data-v-0f7679c6"]]), Dy = {
   name: "ecs-sidebar-content",
   props: {
     /** Adds an inner padding to the content area. */
@@ -16027,7 +16058,7 @@ const Wk = /* @__PURE__ */ _(Oy, [["render", Ry], ["__scopeId", "data-v-0f7679c6
     }
   }
 };
-function Dy(e, s, t, a, n, i) {
+function Ny(e, s, t, a, n, i) {
   return o(), r("div", {
     class: y(["ecs-sidebar-content scrollbar", [
       t.indent ? "ecs-sidebar-content-indent" : "",
@@ -16037,7 +16068,7 @@ function Dy(e, s, t, a, n, i) {
     p(e.$slots, "default", {}, void 0, !0)
   ], 2);
 }
-const jk = /* @__PURE__ */ _(Vy, [["render", Dy], ["__scopeId", "data-v-197087d5"]]), Ny = {
+const jk = /* @__PURE__ */ _(Dy, [["render", Ny], ["__scopeId", "data-v-197087d5"]]), Vy = {
   name: "ecs-sidebar-footer",
   props: {
     /** Reduces the inner padding. */
@@ -16065,7 +16096,7 @@ function Fy(e, s, t, a, n, i) {
     ], 2)
   ], 2);
 }
-const Uk = /* @__PURE__ */ _(Ny, [["render", Fy], ["__scopeId", "data-v-0c35a678"]]), Hy = {
+const Uk = /* @__PURE__ */ _(Vy, [["render", Fy], ["__scopeId", "data-v-0c35a678"]]), Hy = {
   name: "ecs-sidebar-header",
   props: {
     /** Determines if the sub header area should be expanded. */
@@ -16297,7 +16328,7 @@ function ob(e, s, t, a, n, i) {
             type: "single",
             "line-height": 4,
             width: "random"
-          })) : (o(), r(D, { key: 1 }, [
+          })) : (o(), r(N, { key: 1 }, [
             f("span", ib, [
               p(e.$slots, "default", {}, void 0, !0)
             ]),
@@ -16322,7 +16353,7 @@ function ob(e, s, t, a, n, i) {
                 type: "single",
                 "line-height": 2,
                 width: "random"
-              })) : t.subline ? (o(), r(D, { key: 1 }, [
+              })) : t.subline ? (o(), r(N, { key: 1 }, [
                 L(w(t.subline), 1)
               ], 64)) : u("", !0)
             ]),
@@ -16336,7 +16367,7 @@ function ob(e, s, t, a, n, i) {
                   "line-height": 2,
                   width: "random",
                   alignment: "right"
-                })) : (o(), r(D, { key: 1 }, [
+                })) : (o(), r(N, { key: 1 }, [
                   L(w(t.sublineSecondary), 1)
                 ], 64))
               ], 2)
@@ -16538,7 +16569,7 @@ function hb(e, s, t, a, n, i) {
     class: y(["ecs-swatches", i.sizeClass]),
     role: "radiogroup"
   }, [
-    (o(!0), r(D, null, J(t.swatches, (l) => (o(), r("div", {
+    (o(!0), r(N, null, J(t.swatches, (l) => (o(), r("div", {
       key: l.id,
       onClick: (c) => i.handleItemClick(l),
       onKeydown: [
@@ -16604,7 +16635,7 @@ const Zk = /* @__PURE__ */ _(pb, [["render", yb], ["__scopeId", "data-v-2c119fff
   components: {
     EcsIcon: O,
     EcsSticker: We,
-    EcsFocusRing: V
+    EcsFocusRing: D
   },
   props: {
     /** Makes the tab button smaller as it's designed to be a sub tab button of a larger one. Sub tabs do only work with the `standard` tab bar style. */
@@ -16746,7 +16777,7 @@ function wb(e, s, t, a, n, i) {
 const Qk = /* @__PURE__ */ _(bb, [["render", wb], ["__scopeId", "data-v-e723f4d5"]]), Sb = {
   name: "ecs-tag",
   emits: ["click"],
-  components: { EcsSkeletonLoader: ie, EcsFocusRing: V },
+  components: { EcsSkeletonLoader: ie, EcsFocusRing: D },
   props: {
     /** Determines the visual style of the tag. */
     type: {
@@ -16868,7 +16899,7 @@ function Tb(e, s, t, a, n, i) {
 const t0 = /* @__PURE__ */ _(Ib, [["render", Tb], ["__scopeId", "data-v-4334fe7e"]]), Pb = {
   name: "ecs-toast",
   emits: ["action"],
-  components: { EcsFocusRing: V },
+  components: { EcsFocusRing: D },
   props: {
     /** Determines the visual theme of the toast message. */
     theme: {
@@ -16951,10 +16982,10 @@ const i0 = /* @__PURE__ */ _(Mb, [["render", Ab], ["__scopeId", "data-v-451fee48
       default: !1
     }
   }
-}, Vb = ["aria-busy"], Db = {
+}, Db = ["aria-busy"], Nb = {
   key: 0,
   class: "healthy"
-}, Nb = {
+}, Vb = {
   key: 1,
   class: "corrupted"
 }, Fb = {
@@ -16973,13 +17004,13 @@ function Hb(e, s, t, a, n, i) {
       type: "rect",
       width: 30,
       height: 30
-    })) : (o(), r(D, { key: 1 }, [
+    })) : (o(), r(N, { key: 1 }, [
       b(c, {
         type: "toolbar-transcript",
         color: "#929AA9"
       }),
-      t.state == "healthy" ? (o(), r("div", Db)) : u("", !0),
-      t.state == "corrupted" ? (o(), r("div", Nb)) : u("", !0),
+      t.state == "healthy" ? (o(), r("div", Nb)) : u("", !0),
+      t.state == "corrupted" ? (o(), r("div", Vb)) : u("", !0),
       t.state == "loading" ? (o(), r("span", Fb, [
         b(c, {
           type: "loading",
@@ -16988,7 +17019,7 @@ function Hb(e, s, t, a, n, i) {
         })
       ])) : u("", !0)
     ], 64))
-  ], 10, Vb);
+  ], 10, Db);
 }
 const n0 = /* @__PURE__ */ _(Rb, [["render", Hb], ["__scopeId", "data-v-5b025c70"]]), qb = {
   name: "ecs-tree-list",
@@ -17022,7 +17053,7 @@ function Wb(e, s, t, a, n, i) {
 const a0 = /* @__PURE__ */ _(qb, [["render", Wb], ["__scopeId", "data-v-6af94f50"]]), jb = {
   name: "ecs-tree-list-item",
   emits: ["click", "toggled"],
-  components: { EcsIcon: O, EcsButtonCollapse: ls, EcsFocusRing: V },
+  components: { EcsIcon: O, EcsButtonCollapse: ls, EcsFocusRing: D },
   mixins: [he],
   props: {
     /** ID for the Tree List Item */
@@ -17607,7 +17638,7 @@ function g_(e, s, t, a, n, i) {
     e.$slots.footer ? (o(), r("div", f_, [
       p(e.$slots, "footer", {}, void 0, !0)
     ])) : u("", !0),
-    t.resizable ? (o(), r(D, { key: 2 }, [
+    t.resizable ? (o(), r(N, { key: 2 }, [
       f("div", {
         onMousedown: s[2] || (s[2] = (d) => i.startResize("right")),
         class: "resize-handle resize-handle-right"
@@ -17661,9 +17692,9 @@ export {
   O_ as EcsCommentList,
   T_ as EcsContextMenu,
   R_ as EcsDataCard,
-  V_ as EcsDataCardList,
-  D_ as EcsDataCardRow,
-  N_ as EcsDataGrid,
+  D_ as EcsDataCardList,
+  N_ as EcsDataCardRow,
+  V_ as EcsDataGrid,
   $_ as EcsDataGridCell,
   q_ as EcsDataGridGroup,
   H_ as EcsDataGridHeadCell,
@@ -17690,7 +17721,7 @@ export {
   ak as EcsFlag,
   Ug as EcsFlexCol,
   me as EcsFlexRow,
-  V as EcsFocusRing,
+  D as EcsFocusRing,
   ok as EcsFolderSelector,
   ns as EcsFormCheck,
   um as EcsFormGroup,
@@ -17740,10 +17771,10 @@ export {
   Rk as EcsRange,
   Cv as EcsRatingFavorability,
   _v as EcsRatingStarRead,
-  Vk as EcsRatingStarWrite,
+  Dk as EcsRatingStarWrite,
   nm as EcsScrollContainer,
-  Dk as EcsSection,
-  Nk as EcsSegment,
+  Nk as EcsSection,
+  Vk as EcsSegment,
   Ci as EcsSelect,
   Bp as EcsSelectText,
   Hk as EcsSelectTile,
@@ -17760,7 +17791,7 @@ export {
   ie as EcsSkeletonLoader,
   wo as EcsSortbutton,
   Bh as EcsSplitpanes,
-  Vu as EcsStateIcon,
+  Du as EcsStateIcon,
   We as EcsSticker,
   Xk as EcsStructuredContent,
   Jk as EcsSwatchesPicker,