@melodicdev/components 1.2.4 → 1.4.0

package/assets/melodic-components.min.js

@@ -1,10 +1,10 @@
 const O = (e) => typeof e == "string" ? e : typeof e == "symbol" ? e.toString() : e.name;
-function fs(e) {
+function _s(e) {
   return function(t, r, l) {
     t.params || (t.params = []), t.params[l] = { __injectionToken: O(e) };
   };
 }
-function Z(e = {}) {
+function ee(e = {}) {
   return function(t) {
     const r = e.token ?? t, l = e.dependencies?.map((a) => O(a));
     L.bind(r, t, {
@@ -148,10 +148,10 @@ function H(e) {
     });
   };
 }
-function ee(e) {
+function te(e) {
   return Symbol(e);
 }
-async function _s(e = {}) {
+async function ys(e = {}) {
   const t = e.devMode ?? !1, r = [];
   if (t && console.log("[Melodic] Bootstrap starting..."), e.onError) {
     const o = (n) => {
@@ -362,15 +362,15 @@ function kr(e, t) {
   }
   return r;
 }
-function ys(e) {
+function xs(e) {
   const t = e[tl], r = {
     ...e.base,
     ...t
   };
   return e.extends ? kr(e.extends, r) : r;
 }
-const rl = ee("APP_CONFIG");
-function xs(e) {
+const rl = te("APP_CONFIG");
+function ws(e) {
   return (t) => {
     t.bindValue(rl, e);
   };
@@ -511,6 +511,10 @@ var Ae = class $r extends Error {
         ...t.cancel.cancelledResponse
       }), Promise.resolve(l);
     }
+    if (t.body instanceof FormData) {
+      const l = { ...t.headers };
+      delete l["Content-Type"], delete l["content-type"], t.headers = l;
+    }
     t.abortController === void 0 && (t.abortController = new AbortController());
     let r = await this.executeRequest(t);
     return r = await this.executeResponseInterceptors(r), r;
@@ -605,7 +609,7 @@ var Ae = class $r extends Error {
     return r.includes("application/json") ? await e.json() : r.includes("text/") ? await e.text() : r.includes("application/octet-stream") || r.includes("image/") ? await e.blob() : await e.text();
   }
 };
-function ws(e, t) {
+function ks(e, t) {
   return (r) => {
     const l = new Be(e);
     r.bindValue(Be, l), t?.request && t.request.forEach((a) => {
@@ -615,13 +619,13 @@ function ws(e, t) {
     });
   };
 }
-function ks(e) {
+function $s(e) {
   return { canActivate: e };
 }
-function $s(e) {
+function Cs(e) {
   return { canDeactivate: e };
 }
-function Cs(e) {
+function Ss(e) {
   return { resolve: e };
 }
 var _e = class {
@@ -678,7 +682,7 @@ var _e = class {
   }
 };
 const il = "melodic:route-context";
-var Ss = class extends CustomEvent {
+var Es = class extends CustomEvent {
   constructor(e) {
     super(il, {
       bubbles: !1,
@@ -852,7 +856,7 @@ var xe = class {
     return this._resolvedData.get(t);
   }
 };
-xe = g([Z()], xe);
+xe = g([ee()], xe);
 function j(e, t) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }
@@ -1102,7 +1106,7 @@ var V = class {
     };
   }
 };
-V = g([Z(), j("design:paramtypes", [])], V);
+V = g([ee(), j("design:paramtypes", [])], V);
 var W = /* @__PURE__ */ new Map(), Tr = (e) => {
   if (W.has(e)) return W.get(e);
   const t = e.toLowerCase();
@@ -1114,24 +1118,24 @@ function he(e, t) {
 function ml(e) {
   return Tr(e);
 }
-function Ts(e) {
+function zs(e) {
   return Tr(e) !== void 0;
 }
-function zs(e) {
+function As(e) {
   return W.delete(e);
 }
-function As() {
+function Ds() {
   return Array.from(W.keys());
 }
-function oe(e) {
+function Y(e) {
   return typeof e == "object" && e !== null && "__directive" in e;
 }
-var pe = `m${Math.random().toString(36).slice(2, 9)}`, ul = `<!--${pe}-->`, Ie = `__${pe}_`, He = new RegExp(`${Ie}(\\d+)__`, "g"), ie = (e) => `${Ie}${e}__`, Y = /* @__PURE__ */ new Map(), Ke = /* @__PURE__ */ new WeakMap();
+var pe = `m${Math.random().toString(36).slice(2, 9)}`, ul = `<!--${pe}-->`, Ie = `__${pe}_`, He = new RegExp(`${Ie}(\\d+)__`, "g"), ie = (e) => `${Ie}${e}__`, X = /* @__PURE__ */ new Map(), Ke = /* @__PURE__ */ new WeakMap();
 function be(e) {
   let t = Ke.get(e);
   return t === void 0 && (t = e.join(pe), Ke.set(e, t)), t;
 }
-var hl = class X {
+var hl = class J {
   constructor(t, r) {
     this.strings = t, this.values = r;
   }
@@ -1159,7 +1163,7 @@ var hl = class X {
     this.commit(o);
   }
   getTemplate(t) {
-    let r = Y.get(t);
+    let r = X.get(t);
     if (r) return r;
     const l = [];
     let a = this.strings[0];
@@ -1289,11 +1293,11 @@ var hl = class X {
       element: c,
       parts: l,
       partPaths: m
-    }, Y.size >= 500) {
-      const w = Y.keys().next().value;
-      w && Y.delete(w);
+    }, X.size >= 500) {
+      const w = X.keys().next().value;
+      w && X.delete(w);
     }
-    return Y.set(t, r), r;
+    return X.set(t, r), r;
   }
   getAttributePreProcessor(t) {
     return {
@@ -1412,6 +1416,27 @@ var hl = class X {
       t.renderedNodes = [], t.arrayState = void 0, t.nestedContainer = void 0;
     }
   }
+  /**
+  * Clears DOM nodes created by a directive (e.g. repeat, when) when
+  * switching away from a directive to a different renderable type.
+  * Removes all nodes between the directive's markers and restores
+  * part.node into the DOM so non-directive rendering can proceed.
+  */
+  clearDirectiveDOM(t) {
+    const r = t.directiveState;
+    if (!r) return;
+    const l = r.startMarker, a = r.endMarker;
+    if (l && a && l.parentNode) {
+      const o = l.parentNode;
+      let s = l.nextSibling;
+      for (; s && s !== a; ) {
+        const n = s.nextSibling;
+        o.removeChild(s), s = n;
+      }
+      t.node && o.insertBefore(t.node, a), o.removeChild(l), o.removeChild(a);
+    }
+    t.directiveState = void 0;
+  }
   cleanupParts(t) {
     for (const r of t) {
       if (r.actionCleanup) try {
@@ -1498,7 +1523,7 @@ var hl = class X {
     }
     this.clearRenderedNodes(t);
     const o = [];
-    for (const s of r) if (s instanceof X) {
+    for (const s of r) if (s instanceof J) {
       const n = document.createDocumentFragment();
       s.renderInto(n);
       const c = Array.from(n.childNodes);
@@ -1525,7 +1550,7 @@ var hl = class X {
   }
   createArrayItem(t, r, l) {
     const a = document.createDocumentFragment();
-    t instanceof X ? t.renderInto(a) : t instanceof Node ? a.appendChild(t) : t != null && a.appendChild(document.createTextNode(String(t)));
+    t instanceof J ? t.renderInto(a) : t instanceof Node ? a.appendChild(t) : t != null && a.appendChild(document.createTextNode(String(t)));
     const o = Array.from(a.childNodes);
     return r.insertBefore(a, l), {
       container: a,
@@ -1533,7 +1558,7 @@ var hl = class X {
     };
   }
   updateArrayItem(t, r, l, a) {
-    if (r instanceof X) {
+    if (r instanceof J) {
       r.renderInto(t.container), t.value = r, t.nodes = Array.from(t.container.childNodes);
       return;
     }
@@ -1545,15 +1570,18 @@ var hl = class X {
   commit(t) {
     for (const r of t) {
       const l = this.values[r.index], a = r.type === "attribute" && r.attributeIndices && r.attributeStrings;
-      if (!(!a && !oe(l) && r.type !== "action" && r.previousValue === l)) {
+      if (!(!a && !Y(l) && r.type !== "action" && r.previousValue === l)) {
         switch (r.type) {
           case "node":
-            r.node && (oe(l) ? r.directiveState = l.render(r.node, r.directiveState) : l instanceof X ? this.renderNestedTemplate(r, l) : l instanceof Node ? this.renderNode(r, l) : Array.isArray(l) ? this.renderArray(r, l) : (this.clearRenderedNodes(r), r.node.textContent = String(l ?? "")));
+            if (r.node) {
+              const o = Y(r.previousValue), s = Y(l);
+              o && !s && r.directiveState && this.clearDirectiveDOM(r), !o && s && this.clearRenderedNodes(r), s ? r.directiveState = l.render(r.node, r.directiveState) : l instanceof J ? this.renderNestedTemplate(r, l) : l instanceof Node ? this.renderNode(r, l) : Array.isArray(l) ? this.renderArray(r, l) : (this.clearRenderedNodes(r), r.node.textContent = String(l ?? ""));
+            }
             break;
           case "attribute":
             if (r.node && r.name) {
               const o = r.node;
-              if (oe(l)) r.directiveState = l.render(o, r.directiveState);
+              if (Y(l)) r.directiveState = l.render(o, r.directiveState);
               else if (a) {
                 const s = r.attributeStrings, n = r.attributeIndices;
                 let c = s[0] ?? "";
@@ -1574,7 +1602,7 @@ var hl = class X {
             }
             break;
           case "property":
-            r.node && r.name && (oe(l) ? r.directiveState = l.render(r.node, r.directiveState) : r.node[r.name] = l);
+            r.node && r.name && (Y(l) ? r.directiveState = l.render(r.node, r.directiveState) : r.node[r.name] = l);
             break;
           case "event":
             if (r.node && r.name) {
@@ -1991,22 +2019,22 @@ function z(e) {
     r.destroy(), l();
   }, t;
 }
-const Ms = () => () => ({}), Ps = (e, t) => ((r) => ({
+const Ps = () => () => ({}), Os = (e, t) => ((r) => ({
   type: e,
   payload: r ?? (t ? t() : void 0)
 }));
-function Os(...e) {
+function Ns(...e) {
   return { reducers: e };
 }
-const Ns = (e) => {
+const Ls = (e) => {
   const t = {};
   return Object.keys(e).forEach((r) => {
     t[r] = P(e[r]);
   }), t;
-}, Ls = (e, t) => ({
+}, Vs = (e, t) => ({
   action: e(),
   reducer: t
-}), $e = ee("RX_INIT_STATE"), Ce = ee("RX_ACTION_PROVIDERS"), Se = ee("RX_EFFECTS_PROVIDERS"), Ir = ee("RX_STATE_DEBUG");
+}), $e = te("RX_INIT_STATE"), Ce = te("RX_ACTION_PROVIDERS"), Se = te("RX_EFFECTS_PROVIDERS"), Ir = te("RX_STATE_DEBUG");
 var vl = class {
   constructor() {
     this._effects = [];
@@ -2020,7 +2048,7 @@ var vl = class {
   getEffects() {
     return this._effects;
   }
-}, Vs = class extends vl {
+}, js = class extends vl {
   constructor(e, t = { reducers: [] }, r = !1) {
     super(), this._initState = e, this._reducerConfig = t, this._debug = r, this._state = P(e);
   }
@@ -2133,8 +2161,8 @@ g([H($e), j("design:type", Object)], F.prototype, "_state", void 0);
 g([H(Ce), j("design:type", Object)], F.prototype, "_reducerMap", void 0);
 g([H(Se), j("design:type", Object)], F.prototype, "_effectMap", void 0);
 g([H(Ir), j("design:type", Boolean)], F.prototype, "_debug", void 0);
-F = g([Z(), j("design:paramtypes", [])], F);
-function Fs(e, t, r, l = !1) {
+F = g([ee(), j("design:paramtypes", [])], F);
+function qs(e, t, r, l = !1) {
   return (a) => {
     a.bindValue($e, e), a.bindValue(Ce, t), a.bindValue(Se, r), a.bindValue(Ir, l), a.bind(F, F, { dependencies: [
       $e,
@@ -2387,7 +2415,7 @@ function wl(e) {
     a[s] = o, o = t[o];
   return a;
 }
-function qs(e, t, r) {
+function Bs(e, t, r) {
   return U((l, a) => {
     if (!a) {
       const o = l.parentNode;
@@ -2524,7 +2552,7 @@ function G(e) {
     return a;
   });
 }
-function Bs(e) {
+function Hs(e) {
   return U((t, r) => {
     if (!r) {
       const l = t.parentNode;
@@ -2586,7 +2614,7 @@ function Sl(e, t, r) {
   };
 }
 he("portal", Sl);
-var Hs = class {
+var Ks = class {
   constructor() {
     this.__directive = !0;
   }
@@ -2810,13 +2838,13 @@ var Tl = class {
     this.errors.set(t);
   }
 };
-function Ks(e, t) {
+function Ws(e, t) {
   return new El(e, t);
 }
-function Ws(e, t) {
+function Gs(e, t) {
   return new Tl(e, t);
 }
-const Gs = {
+const Us = {
   required: (e) => e == null || e === "" || Array.isArray(e) && e.length === 0 ? { required: {
     code: "required",
     message: "This field is required"
@@ -2892,13 +2920,13 @@ const Gs = {
     return l;
   }
 };
-function Us(e, t, r) {
+function Ys(e, t, r) {
   return (l) => t(l) ? null : { [e]: {
     code: e,
     message: typeof r == "function" ? r(l) : r
   } };
 }
-function Ys(e, t, r) {
+function Xs(e, t, r) {
   return async (l) => await t(l) ? null : { [e]: {
     code: e,
     message: typeof r == "function" ? r(l) : r
@@ -3264,7 +3292,7 @@ const Il = {
   "--ml-screen-lg": "1024px",
   "--ml-screen-xl": "1280px",
   "--ml-screen-2xl": "1536px"
-}, Xs = {
+}, Js = {
   xs: 320,
   sm: 640,
   md: 768,
@@ -3299,7 +3327,7 @@ const Bl = {
   "--ml-color-border": "var(--ml-gray-200)",
   "--ml-color-border-strong": "var(--ml-gray-300)",
   "--ml-color-border-muted": "var(--ml-gray-100)"
-}, Js = `:root, [data-theme="light"] {
+}, Qs = `:root, [data-theme="light"] {
 	${Object.entries(Bl).map(([e, t]) => `${e}: ${t};`).join(`
 	`)}
 
@@ -3373,7 +3401,7 @@ const Bl = {
   "--ml-tooltip-bg": "var(--ml-gray-100)",
   "--ml-tooltip-text": "var(--ml-gray-900)",
   "--ml-card-footer-bg": "var(--ml-gray-800)"
-}, Qs = `[data-theme="dark"] {
+}, Zs = `[data-theme="dark"] {
 	${Object.entries(et).map(([e, t]) => `${e}: ${t};`).join(`
 	`)}
 
@@ -3387,14 +3415,14 @@ const Bl = {
 
 		color-scheme: dark;
 	}
-}`, Zs = `:root {
+}`, en = `:root {
 	${ql(Fl)}
 
 	/* Default to light color scheme */
 	color-scheme: light;
 }`;
 var ce = "system", Ee = /* @__PURE__ */ new Set(), ne = null;
-function en() {
+function tn() {
   return ce;
 }
 function Hl() {
@@ -3412,13 +3440,13 @@ function Kl(e) {
   } else
     document.documentElement.setAttribute("data-theme", e), fe(e, e);
 }
-function tn(e) {
+function rn(e) {
   return Ee.add(e), () => Ee.delete(e);
 }
 function fe(e, t) {
   Ee.forEach((r) => r(e, t));
 }
-function rn() {
+function ln() {
   Kl(Hl() === "light" ? "dark" : "light");
 }
 function Or(e, t) {
@@ -3427,13 +3455,13 @@ function Or(e, t) {
 	`)}
 }`;
 }
-function ln(e, t) {
+function an(e, t) {
   const r = Or(e, t), l = document.createElement("style");
   l.id = `ml-theme-${e}`, l.textContent = r;
   const a = document.getElementById(l.id);
   return a && a.remove(), document.head.appendChild(l), l;
 }
-function an(e, t) {
+function on(e, t) {
   const r = {};
   return t.primary && (r["--ml-color-primary"] = t.primary), t.secondary && (r["--ml-color-secondary"] = t.secondary), t.success && (r["--ml-color-success"] = t.success), t.warning && (r["--ml-color-warning"] = t.warning), t.danger && (r["--ml-color-danger"] = t.danger), Or(e, r);
 }
@@ -3481,7 +3509,7 @@ function Wl(e, t, r) {
     y: s
   };
 }
-function te(e, t, r = {}) {
+function re(e, t, r = {}) {
   const { placement: l = "bottom", middleware: a = [] } = r, o = e.getBoundingClientRect(), s = t.getBoundingClientRect(), { x: n, y: c } = Wl(o, s, l);
   let m = {
     x: n,
@@ -3567,7 +3595,7 @@ function Me(e, t, r, l = {}) {
     c.forEach((m) => m());
   };
 }
-function re(e = 0) {
+function le(e = 0) {
   const t = typeof e == "number" ? e : e.mainAxis ?? 0, r = typeof e == "number" ? 0 : e.crossAxis ?? 0;
   return {
     name: "offset",
@@ -3623,7 +3651,7 @@ function rt(e, t) {
       return !1;
   }
 }
-function le(e = {}) {
+function ae(e = {}) {
   const { padding: t = 0 } = e;
   return {
     name: "flip",
@@ -3686,7 +3714,7 @@ function Yl(e, t, r) {
     y: s
   };
 }
-function ae(e = {}) {
+function oe(e = {}) {
   const { padding: t = 0, mainAxis: r = !0, crossAxis: l = !0 } = e;
   return {
     name: "shift",
@@ -3758,11 +3786,11 @@ function Jl(e) {
   const t = Pe(e);
   return t[t.length - 1] ?? null;
 }
-function on(e) {
+function sn(e) {
   const t = Lr(e);
   return t ? (t.focus(), !0) : !1;
 }
-function sn(e) {
+function nn(e) {
   const t = Jl(e);
   return t ? (t.focus(), !0) : !1;
 }
@@ -3800,27 +3828,27 @@ function Ql(e, t = {}) {
     isActive: u
   };
 }
-function nn(e, t) {
+function dn(e, t) {
   const r = Ql(e, t);
   return r.activate(), () => r.deactivate();
 }
-var J = !1, lt = !1;
+var Q = !1, lt = !1;
 function Vr() {
   lt || (lt = !0, document.addEventListener("keydown", () => {
-    J = !0;
+    Q = !0;
   }, !0), document.addEventListener("mousedown", () => {
-    J = !1;
+    Q = !1;
   }, !0), document.addEventListener("pointerdown", () => {
-    J = !1;
+    Q = !1;
   }, !0));
 }
-function dn() {
-  return Vr(), J;
+function cn() {
+  return Vr(), Q;
 }
-function cn(e, t = "focus-visible") {
+function mn(e, t = "focus-visible") {
   Vr();
   function r() {
-    J && e.classList.add(t);
+    Q && e.classList.add(t);
   }
   function l() {
     e.classList.remove(t);
@@ -3843,13 +3871,13 @@ function Zl() {
     border: "0"
   }), document.body.appendChild(I)), I;
 }
-function mn(e, t = "polite") {
+function un(e, t = "polite") {
   const r = Zl();
   r.setAttribute("aria-live", t), r.textContent = "", setTimeout(() => {
     r.textContent = e;
   }, 50);
 }
-function un(e = {}) {
+function hn(e = {}) {
   const { id: t, priority: r = "polite", atomic: l = !0 } = e, a = document.createElement("div");
   return t && (a.id = t), a.setAttribute("aria-live", r), a.setAttribute("aria-atomic", l.toString()), a.setAttribute("role", "status"), Object.assign(a.style, {
     position: "absolute",
@@ -3863,7 +3891,7 @@ function un(e = {}) {
     border: "0"
   }), a;
 }
-const hn = `
+const pn = `
 	*,
 	*::before,
 	*::after {
@@ -3908,7 +3936,7 @@ const hn = `
 	[hidden] {
 		display: none !important;
 	}
-`, pn = `
+`, vn = `
 	.visually-hidden {
 		position: absolute;
 		width: 1px;
@@ -3931,7 +3959,7 @@ const hn = `
 		clip: auto;
 		white-space: normal;
 	}
-`, vn = `
+`, gn = `
 	:host {
 		/* Inherit font from parent by default */
 		font-family: var(--ml-font-sans);
@@ -3963,7 +3991,7 @@ const hn = `
 		display: none !important;
 	}
 `;
-function gn(e, t) {
+function bn(e, t) {
   function r(l) {
     const a = l.target;
     e.contains(a) || t(l);
@@ -6663,12 +6691,12 @@ var gt = class {
     const t = this.elementRef.shadowRoot?.querySelector(".ml-select__trigger"), r = this.getDropdownEl();
     if (!t || !r) return;
     r.style.width = `${t.offsetWidth}px`;
-    const { x: l, y: a } = te(t, r, {
+    const { x: l, y: a } = re(t, r, {
       placement: "bottom-start",
       middleware: [
-        re(4),
-        le(),
-        ae({ padding: 8 })
+        le(4),
+        ae(),
+        oe({ padding: 8 })
       ]
     });
     r.style.left = `${l}px`, r.style.top = `${a}px`;
@@ -6939,7 +6967,7 @@ const Ia = () => y`
 		width: 20px;
 		height: 20px;
 		border-radius: var(--ml-radius-full);
-		background-color: white;
+		background-color: var(--ml-color-surface);
 		border: 2px solid var(--ml-color-primary);
 		box-shadow: var(--ml-shadow-sm);
 		transition:
@@ -6965,7 +6993,7 @@ const Ia = () => y`
 		width: 20px;
 		height: 20px;
 		border-radius: var(--ml-radius-full);
-		background-color: white;
+		background-color: var(--ml-color-surface);
 		border: 2px solid var(--ml-color-primary);
 		box-shadow: var(--ml-shadow-sm);
 	}
@@ -7944,12 +7972,12 @@ var xt = class {
     this._cleanupAutoUpdate?.(), this._cleanupAutoUpdate = Me(t, r, l);
   }
   updatePosition(t, r) {
-    const { x: l, y: a } = te(t, r, {
+    const { x: l, y: a } = re(t, r, {
       placement: "bottom-start",
       middleware: [
-        re(4),
-        le(),
-        ae({ padding: 8 })
+        le(4),
+        ae(),
+        oe({ padding: 8 })
       ]
     });
     r.style.left = `${l}px`, r.style.top = `${a}px`;
@@ -8199,7 +8227,7 @@ var kt = class {
     return this._containerEl && document.body.contains(this._containerEl) ? this._containerEl : (this._containerEl = document.createElement("ml-toast-container"), this._containerEl.setAttribute("position", this._position), document.body.appendChild(this._containerEl), this._containerEl);
   }
 };
-kt = g([Z()], kt);
+kt = g([ee()], kt);
 function Wa(e) {
   return i`
 		<div
@@ -8947,7 +8975,7 @@ const ro = () => y`
 	}
 
 	.ml-card {
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-card-bg, var(--ml-color-surface));
 		border-radius: var(--ml-radius-lg);
 		overflow: hidden;
 		height: 100%;
@@ -9285,7 +9313,7 @@ const mo = () => y`
 		font-weight: var(--ml-font-semibold);
 		vertical-align: middle;
 		border-radius: var(--ml-radius-full);
-		border: 2px solid var(--ml-color-surface);
+		border: 2px solid var(--ml-avatar-border-color, var(--ml-color-surface));
 		box-shadow: var(--ml-shadow-xs);
 	}
 
@@ -9382,15 +9410,18 @@ At = g([_({
   ]
 })], At);
 function uo(e) {
+  const t = e.color ? `--ml-badge-bg: ${e.color}; --ml-badge-color: #fff` : "";
   return i`
 		<span
 			class=${v({
     "ml-badge": !0,
-    [`ml-badge--${e.variant}`]: !0,
+    [`ml-badge--${e.variant}`]: !e.color,
+    "ml-badge--custom": !!e.color,
     [`ml-badge--${e.size}`]: !0,
     "ml-badge--dot": e.dot,
     "ml-badge--pill": e.pill
   })}
+			style=${t}
 		>
 			${e.dot ? i`<span class="ml-badge__dot"></span>` : ""}
 			<slot></slot>
@@ -9481,10 +9512,16 @@ const ho = () => y`
 		color: var(--ml-badge-error-text);
 	}
 
+	.ml-badge--custom {
+		background-color: var(--ml-badge-bg);
+		border-color: transparent;
+		color: var(--ml-badge-color, #fff);
+	}
+
 `;
 var Dt = class {
   constructor() {
-    this.variant = "default", this.size = "md", this.dot = !1, this.pill = !1;
+    this.variant = "default", this.size = "md", this.dot = !1, this.pill = !1, this.color = "";
   }
 };
 Dt = g([_({
@@ -9495,7 +9532,8 @@ Dt = g([_({
     "variant",
     "size",
     "dot",
-    "pill"
+    "pill",
+    "color"
   ]
 })], Dt);
 function po(e) {
@@ -10189,8 +10227,9 @@ function $o(e) {
 							<span
 								class=${v({
     "ml-afi__indicator": !0,
-    [`ml-afi__indicator--${e["indicator-color"]}`]: !0
+    [`ml-afi__indicator--${e["indicator-color"]}`]: e.isPresetColor
   })}
+								style=${e.isPresetColor ? "" : `--ml-afi-indicator-bg: ${e["indicator-color"]}`}
 							></span>
 						`)}
 				</div>
@@ -10313,6 +10352,7 @@ const Co = () => y`
 		height: 8px;
 		border-radius: var(--ml-radius-full);
 		flex-shrink: 0;
+		background-color: var(--ml-afi-indicator-bg);
 	}
 
 	.ml-afi__indicator--gray {
@@ -10335,10 +10375,20 @@ const Co = () => y`
 		background-color: var(--ml-color-error);
 	}
 `;
-var Lt = class {
+var So = /* @__PURE__ */ new Set([
+  "success",
+  "warning",
+  "error",
+  "primary",
+  "gray"
+]), Lt = class {
   constructor() {
     this.name = "", this.timestamp = "", this["avatar-src"] = "", this["avatar-initials"] = "", this["avatar-size"] = "sm", this.subtitle = "", this.indicator = !1, this["indicator-color"] = "gray";
   }
+  /** Whether the indicator-color is a preset name */
+  get isPresetColor() {
+    return So.has(this["indicator-color"]);
+  }
   /** Check if avatar slot has content */
   get hasAvatarSlot() {
     return this.elementRef?.querySelector('[slot="avatar"]') !== null;
@@ -10363,10 +10413,10 @@ Lt = g([_({
     "indicator-color"
   ]
 })], Lt);
-function So(e, t, r) {
+function Eo(e, t, r) {
   return e.render ? e.render(t[e.key], t, r) : t[e.key] ?? "";
 }
-function Eo(e) {
+function Ro(e) {
   return i`
 		<div class=${v({
     "ml-table": !0,
@@ -10460,7 +10510,7 @@ function Eo(e) {
       "ml-table__td": !0,
       [`ml-table__td--${a.align ?? "left"}`]: !0
     })}>
-											${So(a, t, l)}
+											${Eo(a, t, l)}
 										</td>
 									`)}
 								</tr>
@@ -10484,7 +10534,7 @@ function Eo(e) {
 		</div>
 	`;
 }
-const Ro = () => y`
+const To = () => y`
 	:host {
 		display: block;
 	}
@@ -10614,7 +10664,10 @@ const Ro = () => y`
 	}
 
 	.ml-table--hoverable .ml-table__row:hover {
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-table-row-hover-bg, var(--ml-color-surface-sunken));
+		border-color: var(--ml-table-row-hover-border-color, transparent);
+		border-width: var(--ml-table-row-hover-border-width, 0);
+		border-style: solid;
 	}
 
 	.ml-table--row-clickable .ml-table__row {
@@ -10727,9 +10780,9 @@ const Ro = () => y`
 		padding: var(--ml-space-2) var(--ml-space-4);
 	}
 `;
-var Fr = /* @__PURE__ */ new WeakSet(), To = EventTarget.prototype.addEventListener;
+var Fr = /* @__PURE__ */ new WeakSet(), zo = EventTarget.prototype.addEventListener;
 EventTarget.prototype.addEventListener = function(e, t, r) {
-  e === "ml:row-click" && Fr.add(this), To.call(this, e, t, r);
+  e === "ml:row-click" && Fr.add(this), zo.call(this, e, t, r);
 };
 var Vt = class {
   constructor() {
@@ -10840,8 +10893,8 @@ var Vt = class {
 };
 Vt = g([_({
   selector: "ml-table",
-  template: Eo,
-  styles: Ro,
+  template: Ro,
+  styles: To,
   attributes: [
     "selectable",
     "striped",
@@ -10853,12 +10906,12 @@ Vt = g([_({
     "virtual"
   ]
 })], Vt);
-function zo(e, t, r) {
+function Ao(e, t, r) {
   if (e.render) return e.render(t[e.key], t, r);
   const l = t[e.key];
   return l ?? "";
 }
-function Ao(e) {
+function Do(e) {
   const t = e.gridTemplateColumns, r = e.totalGridWidth;
   return i`
 		<div class=${v({
@@ -11005,7 +11058,7 @@ function Ao(e) {
   })}
 										style=${o.pinned === "left" ? `left: ${e.getPinnedLeftOffset(o.key)}px` : ""}
 									>
-										${zo(o, l, e.startIndex + a)}
+										${Ao(o, l, e.startIndex + a)}
 									</div>
 								`)}
 							</div>
@@ -11060,7 +11113,7 @@ function Ao(e) {
 		</div>
 	`;
 }
-const Do = () => y`
+const Io = () => y`
 	:host {
 		display: flex;
 		flex-direction: column;
@@ -11760,8 +11813,8 @@ var jt = class {
 };
 jt = g([_({
   selector: "ml-data-grid",
-  template: Ao,
-  styles: Do,
+  template: Do,
+  styles: Io,
   attributes: [
     "selectable",
     "striped",
@@ -11775,7 +11828,7 @@ jt = g([_({
     "show-filter-row"
   ]
 })], jt);
-var Io = [
+var Mo = [
   "January",
   "February",
   "March",
@@ -11825,11 +11878,11 @@ function Ft(e) {
   const [t, r, l] = e.split("T")[0].split("-").map(Number);
   return new Date(t, r - 1, l);
 }
-function Mo(e, t) {
+function Po(e, t) {
   return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
 function Br(e) {
-  return Mo(e, /* @__PURE__ */ new Date());
+  return Po(e, /* @__PURE__ */ new Date());
 }
 function K(e, t) {
   const r = new Date(e);
@@ -11843,7 +11896,7 @@ function Hr(e, t = 0) {
   const r = new Date(e), l = (r.getDay() - t + 7) % 7;
   return r.setDate(r.getDate() - l), r;
 }
-function Po(e) {
+function Oo(e) {
   const t = new Date(Date.UTC(e.getFullYear(), e.getMonth(), e.getDate()));
   t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
   const r = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
@@ -11854,9 +11907,9 @@ function B(e) {
   return l === 0 ? `${o} ${a}` : `${o}:${String(l).padStart(2, "0")} ${a}`;
 }
 function Bt(e) {
-  return `${Io[e.getMonth()]} ${e.getFullYear()}`;
+  return `${Mo[e.getMonth()]} ${e.getFullYear()}`;
 }
-function Oo(e, t) {
+function No(e, t) {
   const r = Re[e.getMonth()], l = Re[t.getMonth()];
   return e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear() ? `${r} ${e.getDate()} – ${t.getDate()}, ${e.getFullYear()}` : e.getFullYear() === t.getFullYear() ? `${r} ${e.getDate()} – ${l} ${t.getDate()}, ${e.getFullYear()}` : `${r} ${e.getDate()}, ${e.getFullYear()} – ${l} ${t.getDate()}, ${t.getFullYear()}`;
 }
@@ -11901,7 +11954,7 @@ function Ht(e, t, r = 0) {
   }
   return c;
 }
-function No(e, t = 0) {
+function Lo(e, t = 0) {
   const r = Hr(e, t);
   return Array.from({ length: 7 }, (l, a) => K(r, a));
 }
@@ -11917,10 +11970,10 @@ function Kt(e = 0) {
 function ue(e, t) {
   return e.filter((r) => r.start.split("T")[0] === t);
 }
-function Lo(e) {
+function Vo(e) {
   return Re[e.getMonth()];
 }
-function Vo(e) {
+function jo(e) {
   return qr[e.getDay()];
 }
 function M(e) {
@@ -11973,7 +12026,7 @@ function Kr(e) {
   }
   return s;
 }
-function jo() {
+function Fo() {
   const e = [];
   for (let t = 0; t < 24; t++) for (let r = 0; r < 60; r += 30) {
     const l = t >= 12 ? "PM" : "AM", a = t % 12 || 12, o = r === 0 ? `${a} ${l}` : "";
@@ -11985,8 +12038,8 @@ function jo() {
   }
   return e;
 }
-function Fo(e, t, r) {
-  return No(e, t).map((l) => {
+function qo(e, t, r) {
+  return Lo(e, t).map((l) => {
     const a = N(l.getFullYear(), l.getMonth(), l.getDate()), o = ue(r, a).filter((s) => !s.allDay);
     return {
       date: a,
@@ -11997,7 +12050,7 @@ function Fo(e, t, r) {
     };
   });
 }
-function qo(e, t) {
+function Bo(e, t) {
   const r = N(e.getFullYear(), e.getMonth(), e.getDate()), l = ue(t, r).filter((a) => !a.allDay);
   return {
     date: r,
@@ -12007,7 +12060,7 @@ function qo(e, t) {
     events: Kr(l)
   };
 }
-function Bo(e, t, r) {
+function Ho(e, t, r) {
   const l = /* @__PURE__ */ new Set(), a = new Date(e, t + 1, 0).getDate();
   for (let o = 1; o <= a; o++) {
     const s = N(e, t, o);
@@ -12015,12 +12068,12 @@ function Bo(e, t, r) {
   }
   return l;
 }
-var Ho = {
+var Ko = {
   month: "Month view",
   week: "Week view",
   day: "Day view"
 };
-function Ko(e) {
+function Wo(e) {
   return i`
 		<div class="ml-cv__today-badge">
 			<span class="ml-cv__today-badge-month">${e.todayMonthAbbrev}</span>
@@ -12035,7 +12088,7 @@ function Ko(e) {
 		</div>
 	`;
 }
-function Wo(e) {
+function Go(e) {
   return i`
 		${d(!e.hideNav, () => i`
 				<div class="ml-cv__nav-group">
@@ -12060,7 +12113,7 @@ function Wo(e) {
   })}
 						@click=${e.toggleViewDropdown}
 					>
-						${Ho[e.view]}
+						${Ko[e.view]}
 						<ml-icon icon="caret-down" size="xs"></ml-icon>
 					</button>
 					${d(e.isViewDropdownOpen, () => i`
@@ -12108,20 +12161,20 @@ function Wo(e) {
 			`)}
 	`;
 }
-function Go(e) {
+function Uo(e) {
   return i`
 		<div class="ml-cv__header">
 			<div class="ml-cv__header-left">
-				${d(e.hasHeaderLeftSlot, () => i`<slot name="header-left"></slot>`, () => Ko(e))}
+				${d(e.hasHeaderLeftSlot, () => i`<slot name="header-left"></slot>`, () => Wo(e))}
 			</div>
 
 			<div class="ml-cv__header-right">
-				${d(e.hasHeaderActionsSlot, () => i`<slot name="header-actions"></slot>`, () => Wo(e))}
+				${d(e.hasHeaderActionsSlot, () => i`<slot name="header-actions"></slot>`, () => Go(e))}
 			</div>
 		</div>
 	`;
 }
-function Uo(e, t) {
+function Yo(e, t) {
   const r = t.color || "blue";
   return i`
 		<div
@@ -12140,7 +12193,7 @@ function Uo(e, t) {
 		</div>
 	`;
 }
-function Yo(e) {
+function Xo(e) {
   const t = e.weekdayHeaders, r = e.monthGrid, l = (/* @__PURE__ */ new Date()).getDay(), a = e.weekStartsOn;
   return i`
 		<div class="ml-cv__month">
@@ -12173,7 +12226,7 @@ function Yo(e) {
     })}>${o.date}</div>
 
 							<div class="ml-cv__day-events">
-								${$(s, (c) => c.id, (c) => Uo(e, c))}
+								${$(s, (c) => c.id, (c) => Yo(e, c))}
 								${d(n > 0, () => i`
 									<button
 										type="button"
@@ -12200,7 +12253,7 @@ function Yo(e) {
 		</div>
 	`;
 }
-function Xo(e, t, r) {
+function Jo(e, t, r) {
   const l = t.event.color || "blue";
   return i`
 		<div
@@ -12218,7 +12271,7 @@ function Xo(e, t, r) {
 		</div>
 	`;
 }
-function Jo(e) {
+function Qo(e) {
   const t = e.weekColumns, r = e.timeSlots;
   return i`
 		<div class="ml-cv__time-layout">
@@ -12265,13 +12318,13 @@ function Jo(e) {
 					${$(t.flatMap((l, a) => l.events.map((o) => ({
     pe: o,
     colIdx: a
-  }))), (l) => l.pe.event.id, (l) => Xo(e, l.pe, l.colIdx))}
+  }))), (l) => l.pe.event.id, (l) => Jo(e, l.pe, l.colIdx))}
 				</div>
 			</div>
 		</div>
 	`;
 }
-function Qo(e, t) {
+function Zo(e, t) {
   const r = t.event.color || "blue";
   return i`
 		<div
@@ -12289,7 +12342,7 @@ function Qo(e, t) {
 		</div>
 	`;
 }
-function Zo(e) {
+function ei(e) {
   const t = e.miniCalendarGrid, r = e.miniCalendarWeekdays, l = e.miniCalendarDots, a = e.currentIsoDate;
   return i`
 		<div class="ml-cv__mini-cal">
@@ -12331,7 +12384,7 @@ function Zo(e) {
 		</div>
 	`;
 }
-function ei(e) {
+function ti(e) {
   const t = e.dayEvents;
   return i`
 		<div class="ml-cv__sidebar-title">Events for ${e.dayViewDateLabel}</div>
@@ -12355,7 +12408,7 @@ function ei(e) {
 		`)}
 	`;
 }
-function ti(e) {
+function ri(e) {
   const t = e.dayColumn, r = e.timeSlots;
   return i`
 		<div class="ml-cv__day-layout">
@@ -12391,30 +12444,30 @@ function ti(e) {
 							`)}
 
 							<!-- Events -->
-							${$(t.events, (l) => l.event.id, (l) => Qo(e, l))}
+							${$(t.events, (l) => l.event.id, (l) => Zo(e, l))}
 						</div>
 					</div>
 				</div>
 			</div>
 
 			<div class="ml-cv__day-sidebar">
-				${Zo(e)}
 				${ei(e)}
+				${ti(e)}
 			</div>
 		</div>
 	`;
 }
-function ri(e) {
+function li(e) {
   return i`
 		<div class="ml-cv">
-			${Go(e)}
-			${d(e.view === "month", () => Yo(e))}
-			${d(e.view === "week", () => Jo(e))}
-			${d(e.view === "day", () => ti(e))}
+			${Uo(e)}
+			${d(e.view === "month", () => Xo(e))}
+			${d(e.view === "week", () => Qo(e))}
+			${d(e.view === "day", () => ri(e))}
 		</div>
 	`;
 }
-const li = () => y`
+const ai = () => y`
 	:host {
 		display: block;
 		font-family: var(--ml-font-sans);
@@ -13272,7 +13325,7 @@ var Gt = class {
     }
   }
   get todayMonthAbbrev() {
-    return Lo(/* @__PURE__ */ new Date());
+    return Vo(/* @__PURE__ */ new Date());
   }
   get todayDayNumber() {
     return (/* @__PURE__ */ new Date()).getDate();
@@ -13281,15 +13334,15 @@ var Gt = class {
     return Bt(this._currentDate);
   }
   get weekNumber() {
-    return Po(this._currentDate);
+    return Oo(this._currentDate);
   }
   get headerSubtitle() {
     if (this.view === "month") return `Week ${this.weekNumber}`;
     if (this.view === "week") {
       const t = Hr(this._currentDate, this.weekStartsOn);
-      return Oo(t, K(t, 6));
+      return No(t, K(t, 6));
     }
-    return Vo(this._currentDate);
+    return jo(this._currentDate);
   }
   get currentIsoDate() {
     const t = this._currentDate;
@@ -13304,13 +13357,13 @@ var Gt = class {
     return r;
   }
   get weekColumns() {
-    return Fo(this._currentDate, this.weekStartsOn, this.events);
+    return qo(this._currentDate, this.weekStartsOn, this.events);
   }
   get timeSlots() {
-    return jo();
+    return Fo();
   }
   get dayColumn() {
-    return qo(this._currentDate, this.events);
+    return Bo(this._currentDate, this.events);
   }
   get dayEvents() {
     return ue(this.events, this.currentIsoDate);
@@ -13332,7 +13385,7 @@ var Gt = class {
     return Ht(this._miniCalYear, this._miniCalMonth, this.weekStartsOn);
   }
   get miniCalendarDots() {
-    return Bo(this._miniCalYear, this._miniCalMonth, this.events);
+    return Ho(this._miniCalYear, this._miniCalMonth, this.events);
   }
   setDate(t) {
     this.date = N(t.getFullYear(), t.getMonth(), t.getDate()), this._miniCalYear = t.getFullYear(), this._miniCalMonth = t.getMonth(), this.elementRef.dispatchEvent(new CustomEvent("ml:date-change", {
@@ -13344,8 +13397,8 @@ var Gt = class {
 };
 Gt = g([_({
   selector: "ml-calendar-view",
-  template: ri,
-  styles: li,
+  template: li,
+  styles: ai,
   attributes: [
     "view",
     "date",
@@ -13358,7 +13411,7 @@ Gt = g([_({
     "hide-add-button"
   ]
 })], Gt);
-const ai = (e) => i`<i class="${e.format === "regular" ? "ph" : `ph-${e.format}`}">${e.format === "regular" ? e.icon : `${e.icon}-${e.format}`}</i>`, oi = () => y`
+const oi = (e) => i`<i class="${e.format === "regular" ? "ph" : `ph-${e.format}`}">${e.format === "regular" ? e.icon : `${e.icon}-${e.format}`}</i>`, ii = () => y`
 	:host {
 		display: inline-flex;
 		align-items: center;
@@ -13393,15 +13446,15 @@ var Ut = class {
 };
 Ut = g([_({
   selector: "ml-icon",
-  template: ai,
-  styles: oi,
+  template: oi,
+  styles: ii,
   attributes: [
     "icon",
     "format",
     "size"
   ]
 })], Ut);
-function ii(e) {
+function si(e) {
   const t = e.tabs.length > 0;
   return i`
 		<div
@@ -13418,7 +13471,7 @@ function ii(e) {
 				aria-orientation=${e.orientation}
 				@keydown=${e.handleKeyDown}
 			>
-				${t ? $(e.tabs, (r) => `${r.value}-${e.value === r.value}`, (r) => si(e, r)) : i`<slot name="tab" @slotchange=${e.handleTabSlotChange}></slot>`}
+				${t ? $(e.tabs, (r) => `${r.value}-${e.value === r.value}`, (r) => ni(e, r)) : i`<slot name="tab" @slotchange=${e.handleTabSlotChange}></slot>`}
 			</div>
 
 			<div class="ml-tabs__panels">
@@ -13427,7 +13480,7 @@ function ii(e) {
 		</div>
 	`;
 }
-function si(e, t) {
+function ni(e, t) {
   const r = e.value === t.value;
   return i`
 		<button
@@ -13450,7 +13503,7 @@ function si(e, t) {
 		</button>
 	`;
 }
-const ni = () => y`
+const di = () => y`
 	:host {
 		display: block;
 		width: 100%;
@@ -13792,8 +13845,8 @@ var Yt = class {
 };
 Yt = g([_({
   selector: "ml-tabs",
-  template: ii,
-  styles: ni,
+  template: si,
+  styles: di,
   attributes: [
     "value",
     "variant",
@@ -13802,7 +13855,7 @@ Yt = g([_({
     "routed"
   ]
 })], Yt);
-function di(e) {
+function ci(e) {
   return i`
 		<button
 			type="button"
@@ -13824,7 +13877,7 @@ function di(e) {
 		</button>
 	`;
 }
-const ci = () => y`
+const mi = () => y`
 	:host {
 		display: contents;
 	}
@@ -13885,8 +13938,8 @@ var Xt = class {
 };
 Xt = g([_({
   selector: "ml-tab",
-  template: di,
-  styles: ci,
+  template: ci,
+  styles: mi,
   attributes: [
     "value",
     "label",
@@ -13896,14 +13949,14 @@ Xt = g([_({
     "href"
   ]
 })], Xt);
-function mi(e) {
+function ui(e) {
   return i`
 		<div class="ml-tab-panel" role="tabpanel">
 			<slot></slot>
 		</div>
 	`;
 }
-const ui = () => y`
+const hi = () => y`
 	:host {
 		display: block;
 	}
@@ -13928,11 +13981,11 @@ var Jt = class {
 };
 Jt = g([_({
   selector: "ml-tab-panel",
-  template: mi,
-  styles: ui,
+  template: ui,
+  styles: hi,
   attributes: ["value"]
 })], Jt);
-function hi(e) {
+function pi(e) {
   return i`
 		<nav class="ml-breadcrumb" aria-label="Breadcrumb">
 			<ol class="ml-breadcrumb__list">
@@ -13941,7 +13994,7 @@ function hi(e) {
 		</nav>
 	`;
 }
-const pi = () => y`
+const vi = () => y`
 	:host {
 		display: block;
 	}
@@ -13963,11 +14016,11 @@ var Qt = class {
 };
 Qt = g([_({
   selector: "ml-breadcrumb",
-  template: hi,
-  styles: pi,
+  template: pi,
+  styles: vi,
   attributes: ["separator"]
 })], Qt);
-function vi(e) {
+function gi(e) {
   const t = e.separator === "slash" ? "slash-forward" : "caret-right";
   return i`
 		<li
@@ -13993,7 +14046,7 @@ function vi(e) {
 		</li>
 	`;
 }
-const gi = () => y`
+const bi = () => y`
 	:host {
 		display: contents;
 	}
@@ -14061,8 +14114,8 @@ var Zt = class {
 };
 Zt = g([_({
   selector: "ml-breadcrumb-item",
-  template: vi,
-  styles: gi,
+  template: gi,
+  styles: bi,
   attributes: [
     "href",
     "icon",
@@ -14070,7 +14123,7 @@ Zt = g([_({
     "separator"
   ]
 })], Zt);
-function bi(e) {
+function fi(e) {
   return i`
 		<nav class="ml-pagination" aria-label="Pagination">
 			<button
@@ -14120,7 +14173,7 @@ function bi(e) {
 		</nav>
 	`;
 }
-const fi = () => y`
+const _i = () => y`
 	:host {
 		display: block;
 	}
@@ -14252,15 +14305,15 @@ var er = class {
 };
 er = g([_({
   selector: "ml-pagination",
-  template: bi,
-  styles: fi,
+  template: fi,
+  styles: _i,
   attributes: [
     "page",
     "total-pages",
     "siblings"
   ]
 })], er);
-function _i(e) {
+function yi(e) {
   const t = e.navigation.length > 0, r = e.footerNavigation.length > 0, l = e.collapsed;
   return i`
 		<aside
@@ -14283,7 +14336,7 @@ function _i(e) {
 			`)}
 
 			<div class="ml-sidebar__main">
-				${t ? $(e.navigation, (a, o) => `nav-group-${o}`, (a) => yi(e, a)) : i`<slot @slotchange=${e.handleDefaultSlotChange}></slot>`}
+				${t ? $(e.navigation, (a, o) => `nav-group-${o}`, (a) => xi(e, a)) : i`<slot @slotchange=${e.handleDefaultSlotChange}></slot>`}
 			</div>
 
 			<div class="ml-sidebar__footer">
@@ -14312,7 +14365,7 @@ function _i(e) {
 		</aside>
 	`;
 }
-function yi(e, t) {
+function xi(e, t) {
   const r = e.collapsed;
   return i`
 		<div class="ml-sidebar__group">
@@ -14395,7 +14448,7 @@ function Ne(e, t, r) {
 		</div>
 	`;
 }
-const xi = () => y`
+const wi = () => y`
 	:host {
 		display: block;
 		height: 100%;
@@ -14684,8 +14737,8 @@ const xi = () => y`
 `;
 var tr = class {
   constructor() {
-    this.variant = "default", this.active = "", this.collapsed = !1, this.navigation = [], this.footerNavigation = [], this._slottedItems = [], this._hoverTimer = null, this._handleItemClick = this.onItemClick.bind(this), this._handleMouseEnter = this.onMouseEnter.bind(this), this._handleMouseLeave = this.onMouseLeave.bind(this), this.handleDefaultSlotChange = (t) => {
-      this._slottedItems = t.target.assignedElements({ flatten: !0 }), this.updateItemStates();
+    this.variant = "default", this.active = "", this.collapsed = !1, this.navigation = [], this.footerNavigation = [], this._hoverTimer = null, this._handleItemClick = this.onItemClick.bind(this), this._handleMouseEnter = this.onMouseEnter.bind(this), this._handleMouseLeave = this.onMouseLeave.bind(this), this.handleDefaultSlotChange = () => {
+      this.updateItemStates();
     }, this.handleConfigItemClick = (t, r) => {
       this.activateItem(t, r);
     }, this.handleConfigToggle = (t) => {
@@ -14780,11 +14833,11 @@ var tr = class {
 };
 tr = g([_({
   selector: "ml-sidebar",
-  template: _i,
-  styles: xi,
+  template: yi,
+  styles: wi,
   attributes: ["variant", "active"]
 })], tr);
-function wi(e) {
+function ki(e) {
   return i`
 		<div class="ml-sidebar-group">
 			${d(!!e.label && !e.collapsed, () => i`
@@ -14796,7 +14849,7 @@ function wi(e) {
 		</div>
 	`;
 }
-const ki = () => y`
+const $i = () => y`
 	:host {
 		display: block;
 	}
@@ -14831,15 +14884,15 @@ var rr = class {
 };
 rr = g([_({
   selector: "ml-sidebar-group",
-  template: wi,
-  styles: ki,
+  template: ki,
+  styles: $i,
   attributes: ["label", "collapsed"]
 })], rr);
-function $i(e) {
+function Ci(e) {
   const t = parseInt(e.level, 10) || 0, r = e.collapsed, l = i`
 		<div class="ml-sidebar-item__leading">
 			<slot name="leading">
-				${d(!!e.icon, () => i`<ml-icon icon=${e.icon} size="sm"></ml-icon>`)}
+				${d(!!e.icon, () => i`<ml-icon icon=${e.icon} size="sm" format=${e["icon-format"] || "regular"}></ml-icon>`)}
 			</slot>
 		</div>
 		${d(!r, () => i`
@@ -14906,7 +14959,7 @@ function $i(e) {
 		</div>
 	`;
 }
-const Ci = () => y`
+const Si = () => y`
 	:host {
 		display: block;
 	}
@@ -15057,7 +15110,7 @@ const Ci = () => y`
 `;
 var lr = class {
   constructor() {
-    this.icon = "", this.label = "", this.value = "", this.href = "", this.active = !1, this.disabled = !1, this.badge = "", this["badge-color"] = "default", this.external = !1, this.expanded = !1, this.collapsed = !1, this.level = "0", this._hasChildren = !1, this.handleSlotChange = (t) => {
+    this.icon = "", this["icon-format"] = "", this.label = "", this.value = "", this.href = "", this.active = !1, this.disabled = !1, this.badge = "", this["badge-color"] = "default", this.external = !1, this.expanded = !1, this.collapsed = !1, this.level = "0", this._hasChildren = !1, this.handleSlotChange = (t) => {
       this._hasChildren = t.target.assignedElements({ flatten: !0 }).some((r) => r.tagName === "ML-SIDEBAR-ITEM");
     }, this.handleClick = (t) => {
       if (!this.disabled) {
@@ -15088,10 +15141,11 @@ var lr = class {
 };
 lr = g([_({
   selector: "ml-sidebar-item",
-  template: $i,
-  styles: Ci,
+  template: Ci,
+  styles: Si,
   attributes: [
     "icon",
+    "icon-format",
     "label",
     "value",
     "href",
@@ -15105,7 +15159,7 @@ lr = g([_({
     "level"
   ]
 })], lr);
-function Si(e) {
+function Ei(e) {
   const t = e.steps.length > 0, r = e.compact;
   return i`
 		<div
@@ -15122,7 +15176,7 @@ function Si(e) {
 				aria-orientation=${e.orientation}
 				@keydown=${e.handleKeyDown}
 			>
-				${t ? $(e.steps, (l) => `${l.value}-${e.active === l.value}`, (l, a) => Ei(e, l, a)) : i`<slot name="step" @slotchange=${e.handleStepSlotChange}></slot>`}
+				${t ? $(e.steps, (l) => `${l.value}-${e.active === l.value}`, (l, a) => Ri(e, l, a)) : i`<slot name="step" @slotchange=${e.handleStepSlotChange}></slot>`}
 			</div>
 
 			${d(r, () => i`
@@ -15137,7 +15191,7 @@ function Si(e) {
 		</div>
 	`;
 }
-function Ei(e, t, r) {
+function Ri(e, t, r) {
   const l = e.steps, a = r === 0, o = r === l.length - 1, s = e.getStepStatus(t.value), n = e.variant === "bar", c = e.compact;
   return i`
 		<div
@@ -15159,13 +15213,13 @@ function Ei(e, t, r) {
 			tabindex=${s === "current" ? "0" : "-1"}
 			@click=${() => e.handleStepClick(t.value, t.href)}
 		>
-			${d(n, () => Ri(e, t))}
-			${d(!n && !c, () => Ti(e, t, r, a, o, s))}
-			${d(!n && c, () => zi(e, s))}
+			${d(n, () => Ti(e, t))}
+			${d(!n && !c, () => zi(e, t, r, a, o, s))}
+			${d(!n && c, () => Ai(e, s))}
 		</div>
 	`;
 }
-function Ri(e, t) {
+function Ti(e, t) {
   return i`
 		<div class="ml-step__bar"></div>
 		<div class="ml-step__content">
@@ -15174,12 +15228,12 @@ function Ri(e, t) {
 		</div>
 	`;
 }
-function Ti(e, t, r, l, a, o) {
+function zi(e, t, r, l, a, o) {
   return i`
 		<div class="ml-step__track">
 			<div class="ml-step__connector-before ${l ? "ml-step__connector--hidden" : `ml-step__connector--${e.connector}`}"></div>
 			<div class="ml-step__indicator">
-				${Ai(e, t, r, o)}
+				${Di(e, t, r, o)}
 			</div>
 			<div class="ml-step__connector-after ${a ? "ml-step__connector--hidden" : `ml-step__connector--${e.connector}`}"></div>
 		</div>
@@ -15189,10 +15243,10 @@ function Ti(e, t, r, l, a, o) {
 		</div>
 	`;
 }
-function zi(e, t) {
+function Ai(e, t) {
   return i`<div class="ml-step__dot"></div>`;
 }
-function Ai(e, t, r, l) {
+function Di(e, t, r, l) {
   switch (e.variant) {
     case "numbered":
       return i`
@@ -15218,7 +15272,7 @@ function Ai(e, t, r, l) {
       return i``;
   }
 }
-const Di = () => y`
+const Ii = () => y`
 	:host {
 		display: block;
 		width: 100%;
@@ -15868,8 +15922,8 @@ var ar = class {
 };
 ar = g([_({
   selector: "ml-steps",
-  template: Si,
-  styles: Di,
+  template: Ei,
+  styles: Ii,
   attributes: [
     "active",
     "variant",
@@ -15880,7 +15934,7 @@ ar = g([_({
     "routed"
   ]
 })], ar);
-function Ii(e) {
+function Mi(e) {
   const t = e.variant === "bar", r = e.compact;
   return i`
 		<div
@@ -15901,13 +15955,13 @@ function Ii(e) {
 			tabindex=${e.status === "current" ? "0" : "-1"}
 			@click=${e.handleClick}
 		>
-			${d(t, () => Mi(e))}
-			${d(!t && !r, () => Pi(e))}
-			${d(!t && r, () => Oi(e))}
+			${d(t, () => Pi(e))}
+			${d(!t && !r, () => Oi(e))}
+			${d(!t && r, () => Ni(e))}
 		</div>
 	`;
 }
-function Mi(e) {
+function Pi(e) {
   return i`
 		<div class="ml-step__bar"></div>
 		<div class="ml-step__content">
@@ -15916,12 +15970,12 @@ function Mi(e) {
 		</div>
 	`;
 }
-function Pi(e) {
+function Oi(e) {
   return i`
 		<div class="ml-step__track">
 			<div class="ml-step__connector-before ${e.first ? "ml-step__connector--hidden" : `ml-step__connector--${e.connector}`}"></div>
 			<div class="ml-step__indicator">
-				${Ni(e)}
+				${Li(e)}
 			</div>
 			<div class="ml-step__connector-after ${e.last ? "ml-step__connector--hidden" : `ml-step__connector--${e.connector}`}"></div>
 		</div>
@@ -15931,19 +15985,19 @@ function Pi(e) {
 		</div>
 	`;
 }
-function Oi(e) {
+function Ni(e) {
   return i`
 		<div class="ml-step__dot"></div>
 	`;
 }
-function Ni(e) {
+function Li(e) {
   switch (e.variant) {
     case "numbered":
       return or(e);
     case "circles":
-      return Li(e);
-    case "icons":
       return Vi(e);
+    case "icons":
+      return ji(e);
     default:
       return or(e);
   }
@@ -15957,7 +16011,7 @@ function or(e) {
 		</div>
 	`;
 }
-function Li(e) {
+function Vi(e) {
   const t = e.status === "completed";
   return i`
 		<div class="ml-step__indicator-inner ml-step__indicator-inner--circles">
@@ -15966,14 +16020,14 @@ function Li(e) {
 		</div>
 	`;
 }
-function Vi(e) {
+function ji(e) {
   return i`
 		<div class="ml-step__indicator-inner ml-step__indicator-inner--icons">
 			<ml-icon icon=${e.icon || "circle"} size="sm"></ml-icon>
 		</div>
 	`;
 }
-const ji = () => y`
+const Fi = () => y`
 	:host {
 		display: contents;
 	}
@@ -16493,8 +16547,8 @@ var ir = class {
 };
 ir = g([_({
   selector: "ml-step",
-  template: Ii,
-  styles: ji,
+  template: Mi,
+  styles: Fi,
   attributes: [
     "value",
     "label",
@@ -16512,14 +16566,14 @@ ir = g([_({
     "compact"
   ]
 })], ir);
-function Fi(e) {
+function qi(e) {
   return i`
 		<div class="ml-step-panel" role="tabpanel">
 			<slot></slot>
 		</div>
 	`;
 }
-const qi = () => y`
+const Bi = () => y`
 	:host {
 		display: block;
 	}
@@ -16539,11 +16593,11 @@ var sr = class {
 };
 sr = g([_({
   selector: "ml-step-panel",
-  template: Fi,
-  styles: qi,
+  template: qi,
+  styles: Bi,
   attributes: ["value"]
 })], sr);
-const Bi = () => i`<dialog class="ml-dialog">
+const Hi = () => i`<dialog class="ml-dialog">
 		<div class="ml-dialog-header">
 			<slot name="dialog-header"></slot>
 		</div>
@@ -16555,7 +16609,7 @@ const Bi = () => i`<dialog class="ml-dialog">
 		<div class="ml-dialog-footer">
 			<slot name="dialog-footer"></slot>
 		</div>
-	</dialog> `, Hi = () => y`
+	</dialog> `, Ki = () => y`
 	:host {
 		display: contents;
 	}
@@ -16734,7 +16788,7 @@ const Bi = () => i`<dialog class="ml-dialog">
 		}
 	}
 `;
-var Ki = class {
+var Wi = class {
   constructor(e, t) {
     this._dialogID = e, this._dialogEl = t, this._afterOpenedCallback = null, this._afterClosedCallback = null, this._disableClose = !1, this._handleCancel = this.onCancel.bind(this), this._handleBackdropClick = this.onBackdropClick.bind(this), this._dialogEl.addEventListener("cancel", this._handleCancel), this._dialogEl.addEventListener("click", this._handleBackdropClick);
   }
@@ -16772,12 +16826,12 @@ var Ki = class {
   onBackdropClick(e) {
     e.target === this._dialogEl && !this._disableClose && this.close();
   }
-}, Q = class {
+}, Z = class {
   constructor() {
     this._dialogs = /* @__PURE__ */ new Map();
   }
   addDialog(t, r) {
-    const l = new Ki(t, r);
+    const l = new Wi(t, r);
     return this._dialogs.set(t, {
       dialogRef: l,
       dialogComponent: void 0
@@ -16811,7 +16865,7 @@ var Ki = class {
     t.remove();
   }
 };
-Q = g([Z()], Q);
+Z = g([ee()], Z);
 var nr, Te = class {
   constructor() {
     this._dialogID = ea(), this._registered = !1;
@@ -16837,14 +16891,14 @@ var nr, Te = class {
     return this.elementRef.getAttributeNames().find((t) => t.startsWith("#"))?.slice(1) ?? this._dialogID;
   }
 };
-g([H(Q), j("design:type", typeof (nr = typeof Q < "u" && Q) == "function" ? nr : Object)], Te.prototype, "_dialogService", void 0);
+g([H(Z), j("design:type", typeof (nr = typeof Z < "u" && Z) == "function" ? nr : Object)], Te.prototype, "_dialogService", void 0);
 Te = g([_({
   selector: "ml-dialog",
-  template: Bi,
-  styles: Hi,
+  template: Hi,
+  styles: Ki,
   attributes: []
 })], Te);
-function Wi(e) {
+function Gi(e) {
   const t = e.side === "left" ? "left" : "right", r = e.size === "sm" || e.size === "md" || e.size === "lg" || e.size === "xl" ? e.size : "md";
   return i`
 		<dialog
@@ -16879,7 +16933,7 @@ function Wi(e) {
 		</dialog>
 	`;
 }
-const Gi = () => y`
+const Ui = () => y`
 	:host {
 		display: contents;
 	}
@@ -17103,15 +17157,15 @@ var dr = class {
 };
 dr = g([_({
   selector: "ml-drawer",
-  template: Wi,
-  styles: Gi,
+  template: Gi,
+  styles: Ui,
   attributes: [
     "side",
     "size",
     "show-close"
   ]
 })], dr);
-function Ui(e) {
+function Yi(e) {
   return i`
 		<div class="ml-dropdown">
 			<div class="ml-dropdown__trigger" @click=${e.toggle}>
@@ -17128,7 +17182,7 @@ function Ui(e) {
 		</div>
 	`;
 }
-const Yi = () => y`
+const Xi = () => y`
 	:host {
 		display: inline-block;
 	}
@@ -17356,15 +17410,15 @@ var cr = class {
   }
   updatePosition(t, r) {
     const l = this.arrow ? this.elementRef.shadowRoot?.querySelector(".ml-dropdown__arrow") : null, a = [
-      re(this.offset),
-      le(),
-      ae({ padding: 8 })
+      le(this.offset),
+      ae(),
+      oe({ padding: 8 })
     ];
     l && a.push(Nr({
       element: l,
       padding: 8
     }));
-    const { x: o, y: s, placement: n, middlewareData: c } = te(t, r, {
+    const { x: o, y: s, placement: n, middlewareData: c } = re(t, r, {
       placement: this.placement,
       middleware: a
     });
@@ -17383,15 +17437,15 @@ var cr = class {
 };
 cr = g([_({
   selector: "ml-dropdown",
-  template: Ui,
-  styles: Yi,
+  template: Yi,
+  styles: Xi,
   attributes: [
     "placement",
     "offset",
     "arrow"
   ]
 })], cr);
-function Xi(e) {
+function Ji(e) {
   return i`
 		<div
 			class=${v({
@@ -17411,7 +17465,7 @@ function Xi(e) {
 		</div>
 	`;
 }
-const Ji = () => y`
+const Qi = () => y`
 	:host {
 		display: block;
 	}
@@ -17492,8 +17546,8 @@ var mr = class {
 };
 mr = g([_({
   selector: "ml-dropdown-item",
-  template: Xi,
-  styles: Ji,
+  template: Ji,
+  styles: Qi,
   attributes: [
     "value",
     "icon",
@@ -17502,10 +17556,10 @@ mr = g([_({
     "destructive"
   ]
 })], mr);
-function Qi() {
+function Zi() {
   return i`<div class="ml-dropdown-separator" role="separator"></div>`;
 }
-const Zi = () => y`
+const es = () => y`
 	:host {
 		display: block;
 	}
@@ -17520,10 +17574,10 @@ var ur = class {
 };
 ur = g([_({
   selector: "ml-dropdown-separator",
-  template: Qi,
-  styles: Zi
+  template: Zi,
+  styles: es
 })], ur);
-function es(e) {
+function ts(e) {
   return i`
 		<div class="ml-dropdown-group" role="group">
 			${d(!!e.label, () => i`<div class="ml-dropdown-group__label">${e.label}</div>`)}
@@ -17531,7 +17585,7 @@ function es(e) {
 		</div>
 	`;
 }
-const ts = () => y`
+const rs = () => y`
 	:host {
 		display: block;
 	}
@@ -17553,11 +17607,11 @@ var hr = class {
 };
 hr = g([_({
   selector: "ml-dropdown-group",
-  template: es,
-  styles: ts,
+  template: ts,
+  styles: rs,
   attributes: ["label"]
 })], hr);
-function rs(e) {
+function ls(e) {
   return i`
 		<div class="ml-tooltip">
 			<div
@@ -17583,7 +17637,7 @@ function rs(e) {
 		</div>
 	`;
 }
-const ls = () => y`
+const as = () => y`
 	:host {
 		display: inline-block;
 	}
@@ -17668,12 +17722,12 @@ var pr = class {
   updatePosition() {
     const t = this.elementRef.shadowRoot?.querySelector(".ml-tooltip__trigger"), r = this.elementRef.shadowRoot?.querySelector(".ml-tooltip__content"), l = this.elementRef.shadowRoot?.querySelector(".ml-tooltip__arrow");
     if (!t || !r) return;
-    const { x: a, y: o, placement: s } = te(t, r, {
+    const { x: a, y: o, placement: s } = re(t, r, {
       placement: this.placement,
       middleware: [
-        re(8),
-        le(),
-        ae({ padding: 8 })
+        le(8),
+        ae(),
+        oe({ padding: 8 })
       ]
     });
     if (r.style.left = `${a}px`, r.style.top = `${o}px`, r.setAttribute("data-placement", s), l) {
@@ -17684,15 +17738,15 @@ var pr = class {
 };
 pr = g([_({
   selector: "ml-tooltip",
-  template: rs,
-  styles: ls,
+  template: ls,
+  styles: as,
   attributes: [
     "content",
     "placement",
     "delay"
   ]
 })], pr);
-function as(e) {
+function os(e) {
   return i`
 		<div class="ml-popover">
 			<div class="ml-popover__trigger" @click=${e.toggle}>
@@ -17708,7 +17762,7 @@ function as(e) {
 		</div>
 	`;
 }
-const os = () => y`
+const is = () => y`
 	:host {
 		display: inline-block;
 	}
@@ -17824,15 +17878,15 @@ var vr = class {
   }
   updatePosition(t, r) {
     const l = this.arrow ? this.elementRef.shadowRoot?.querySelector(".ml-popover__arrow") : null, a = [
-      re(this.offset),
-      le(),
-      ae({ padding: 8 })
+      le(this.offset),
+      ae(),
+      oe({ padding: 8 })
     ];
     l && a.push(Nr({
       element: l,
       padding: 8
     }));
-    const { x: o, y: s, placement: n, middlewareData: c } = te(t, r, {
+    const { x: o, y: s, placement: n, middlewareData: c } = re(t, r, {
       placement: this.placement,
       middleware: a
     });
@@ -17851,8 +17905,8 @@ var vr = class {
 };
 vr = g([_({
   selector: "ml-popover",
-  template: as,
-  styles: os,
+  template: os,
+  styles: is,
   attributes: [
     "placement",
     "offset",
@@ -17860,7 +17914,7 @@ vr = g([_({
     "arrow"
   ]
 })], vr);
-function is(e) {
+function ss(e) {
   const t = e["sidebar-position"] === "right", r = e["sidebar-collapsed"], l = e["header-fixed"], a = e.mobileOpen, o = e.mobile;
   return i`
 		<div
@@ -17915,7 +17969,7 @@ function is(e) {
 		</div>
 	`;
 }
-const ss = () => y`
+const ns = () => y`
 	:host {
 		display: block;
 		height: 100%;
@@ -18123,15 +18177,15 @@ var gr = class {
 };
 gr = g([_({
   selector: "ml-app-shell",
-  template: is,
-  styles: ss,
+  template: ss,
+  styles: ns,
   attributes: [
     "sidebar-position",
     "sidebar-collapsed",
     "header-fixed"
   ]
 })], gr);
-function ns(e) {
+function ds(e) {
   const t = e.variant === "split" || e.variant === "split-reverse";
   return i`
 		<section
@@ -18192,7 +18246,7 @@ function ns(e) {
 		</section>
 	`;
 }
-const ds = () => y`
+const cs = () => y`
 	:host {
 		display: block;
 		width: 100%;
@@ -18464,8 +18518,8 @@ var br = class {
 };
 br = g([_({
   selector: "ml-hero-section",
-  template: ns,
-  styles: ds,
+  template: ds,
+  styles: cs,
   attributes: [
     "variant",
     "size",
@@ -18474,7 +18528,7 @@ br = g([_({
     "description"
   ]
 })], br);
-function cs(e) {
+function ms(e) {
   const t = !!(e.title || e.hasTitleSlot), r = !!(e.description || e.hasDescriptionSlot);
   return i`
 		<header
@@ -18526,7 +18580,7 @@ function cs(e) {
 		</header>
 	`;
 }
-const ms = () => y`
+const us = () => y`
 	:host {
 		display: block;
 	}
@@ -18722,8 +18776,8 @@ var fr = class {
 };
 fr = g([_({
   selector: "ml-page-header",
-  template: cs,
-  styles: ms,
+  template: ms,
+  styles: us,
   attributes: [
     "variant",
     "divider",
@@ -18731,7 +18785,7 @@ fr = g([_({
     "description"
   ]
 })], fr);
-function us(e) {
+function hs(e) {
   const t = e.variant === "split", r = i`
 		<div class="ml-auth__logo">
 			<slot name="logo"></slot>
@@ -18957,7 +19011,7 @@ const Wr = `
 			padding: var(--ml-space-6);
 		}
 	}
-`, hs = () => y`
+`, ps = () => y`
 	${Wr}
 `;
 var _r = class {
@@ -18975,15 +19029,15 @@ var _r = class {
 };
 _r = g([_({
   selector: "ml-login-page",
-  template: us,
-  styles: hs,
+  template: hs,
+  styles: ps,
   attributes: [
     "variant",
     "title",
     "description"
   ]
 })], _r);
-function ps(e) {
+function vs(e) {
   const t = e.variant === "split", r = i`
 		<div class="ml-auth__logo">
 			<slot name="logo"></slot>
@@ -19037,7 +19091,7 @@ function ps(e) {
 		</div>
 	`;
 }
-const vs = () => y`
+const gs = () => y`
 	${Wr}
 `;
 var yr = class {
@@ -19055,15 +19109,15 @@ var yr = class {
 };
 yr = g([_({
   selector: "ml-signup-page",
-  template: ps,
-  styles: vs,
+  template: vs,
+  styles: gs,
   attributes: [
     "variant",
     "title",
     "description"
   ]
 })], yr);
-function gs(e) {
+function bs(e) {
   const t = e.layout === "default" && e.hasAside;
   return i`
 		<ml-app-shell>
@@ -19106,7 +19160,7 @@ function gs(e) {
 		</ml-app-shell>
 	`;
 }
-const bs = () => y`
+const fs = () => y`
 	:host {
 		display: block;
 		height: 100%;
@@ -19218,8 +19272,8 @@ var xr = class {
 };
 xr = g([_({
   selector: "ml-dashboard-page",
-  template: gs,
-  styles: bs,
+  template: bs,
+  styles: fs,
   attributes: [
     "title",
     "description",
@@ -19247,14 +19301,14 @@ export {
   Et as CardComponent,
   ct as CheckboxComponent,
   Zr as ComponentBase,
-  Vs as ComponentStateBaseService,
+  js as ComponentStateBaseService,
   zt as ContainerComponent,
   xr as DashboardPageComponent,
   xt as DatePickerComponent,
   Te as DialogComponent,
-  Ki as DialogRef,
-  Q as DialogService,
-  Hs as Directive,
+  Wi as DialogRef,
+  Z as DialogService,
+  Ks as Directive,
   Rt as DividerComponent,
   dr as DrawerComponent,
   cr as DropdownComponent,
@@ -19272,8 +19326,8 @@ export {
   Be as HttpClient,
   qe as HttpError,
   Ut as IconComponent,
-  fs as Inject,
-  Z as Injectable,
+  _s as Inject,
+  ee as Injectable,
   Gr as InjectionEngine,
   L as Injector,
   nt as InputComponent,
@@ -19295,7 +19349,7 @@ export {
   ht as RadioCardGroupComponent,
   mt as RadioComponent,
   ut as RadioGroupComponent,
-  Ss as RouteContextEvent,
+  Es as RouteContextEvent,
   xe as RouteContextService,
   _e as RouteMatcher,
   ke as RouterLinkComponent,
@@ -19328,79 +19382,79 @@ export {
   kt as ToastService,
   vt as ToggleComponent,
   pr as TooltipComponent,
-  Gs as Validators,
+  Us as Validators,
   jr as VirtualScroller,
   Co as activityFeedItemStyles,
   $o as activityFeedItemTemplate,
   ko as activityFeedStyles,
   wo as activityFeedTemplate,
   Fl as allTokens,
-  mn as announce,
-  ss as appShellStyles,
-  is as appShellTemplate,
+  un as announce,
+  ns as appShellStyles,
+  ss as appShellTemplate,
   Xr as applyGlobalStyles,
   Kl as applyTheme,
   Nr as arrow,
   Me as autoUpdate,
-  Zs as baseThemeCss,
-  _s as bootstrap,
+  en as baseThemeCss,
+  ys as bootstrap,
   Ll as borderTokens,
-  gi as breadcrumbItemStyles,
-  vi as breadcrumbItemTemplate,
-  pi as breadcrumbStyles,
-  hi as breadcrumbTemplate,
+  bi as breadcrumbItemStyles,
+  gi as breadcrumbItemTemplate,
+  vi as breadcrumbStyles,
+  pi as breadcrumbTemplate,
   jl as breakpointTokens,
-  Xs as breakpoints,
+  Js as breakpoints,
   nl as buildPathFromRoute,
-  li as calendarViewStyles,
-  ri as calendarViewTemplate,
+  ai as calendarViewStyles,
+  li as calendarViewTemplate,
   v as classMap,
-  gn as clickOutside,
+  bn as clickOutside,
   Ml as colorTokens,
-  vn as componentBaseStyles,
-  te as computePosition,
+  gn as componentBaseStyles,
+  re as computePosition,
   z as computed,
   no as containerStyles,
   so as containerTemplate,
-  Ps as createAction,
-  Ys as createAsyncValidator,
-  an as createBrandTheme,
-  $s as createDeactivateGuard,
+  Os as createAction,
+  Xs as createAsyncValidator,
+  on as createBrandTheme,
+  Cs as createDeactivateGuard,
   Ql as createFocusTrap,
-  Ks as createFormControl,
-  Ws as createFormGroup,
-  ks as createGuard,
-  un as createLiveRegion,
-  Os as createReducer,
-  Cs as createResolver,
-  Ns as createState,
+  Ws as createFormControl,
+  Gs as createFormGroup,
+  $s as createGuard,
+  hn as createLiveRegion,
+  Ns as createReducer,
+  Ss as createResolver,
+  Ls as createState,
   Or as createTheme,
-  ee as createToken,
-  Us as createValidator,
+  te as createToken,
+  Ys as createValidator,
   y as css,
   et as darkTheme,
-  Qs as darkThemeCss,
-  bs as dashboardPageStyles,
-  gs as dashboardPageTemplate,
-  ys as defineConfig,
+  Zs as darkThemeCss,
+  fs as dashboardPageStyles,
+  bs as dashboardPageTemplate,
+  xs as defineConfig,
   U as directive,
-  Gi as drawerStyles,
-  Wi as drawerTemplate,
-  ts as dropdownGroupStyles,
-  es as dropdownGroupTemplate,
-  Ji as dropdownItemStyles,
-  Xi as dropdownItemTemplate,
-  Zi as dropdownSeparatorStyles,
-  Qi as dropdownSeparatorTemplate,
-  Yi as dropdownStyles,
-  Ui as dropdownTemplate,
+  Ui as drawerStyles,
+  Gi as drawerTemplate,
+  rs as dropdownGroupStyles,
+  ts as dropdownGroupTemplate,
+  Qi as dropdownItemStyles,
+  Ji as dropdownItemTemplate,
+  es as dropdownSeparatorStyles,
+  Zi as dropdownSeparatorTemplate,
+  Xi as dropdownStyles,
+  Yi as dropdownTemplate,
   tl as environment,
   sl as findRouteByName,
-  le as flip,
-  on as focusFirst,
-  sn as focusLast,
-  nn as focusTrap,
-  cn as focusVisible,
+  ae as flip,
+  sn as focusFirst,
+  nn as focusLast,
+  dn as focusTrap,
+  mn as focusVisible,
   Dl as formControlDirective,
   Pa as formFieldStyles,
   Ma as formFieldTemplate,
@@ -19410,92 +19464,92 @@ export {
   Lr as getFirstFocusable,
   Pe as getFocusableElements,
   Jl as getLastFocusable,
-  As as getRegisteredDirectives,
+  Ds as getRegisteredDirectives,
   Hl as getResolvedTheme,
-  en as getTheme,
+  tn as getTheme,
   O as getTokenKey,
-  Ts as hasAttributeDirective,
-  ds as heroSectionStyles,
-  ns as heroSectionTemplate,
+  zs as hasAttributeDirective,
+  cs as heroSectionStyles,
+  ds as heroSectionTemplate,
   i as html,
-  ln as injectTheme,
-  oe as isDirective,
-  dn as isFocusVisible,
+  an as injectTheme,
+  Y as isDirective,
+  cn as isFocusVisible,
   Ur as isSignal,
   Bl as lightTheme,
-  Js as lightThemeCss,
+  Qs as lightThemeCss,
   xo as listItemStyles,
   yo as listItemTemplate,
   _o as listStyles,
   fo as listTemplate,
-  hs as loginPageStyles,
-  us as loginPageTemplate,
+  ps as loginPageStyles,
+  hs as loginPageTemplate,
   ye as matchRouteTree,
   ea as newID,
-  re as offset,
-  Ls as onAction,
-  tn as onThemeChange,
-  ms as pageHeaderStyles,
-  cs as pageHeaderTemplate,
-  fi as paginationStyles,
-  bi as paginationTemplate,
+  le as offset,
+  Vs as onAction,
+  rn as onThemeChange,
+  us as pageHeaderStyles,
+  ms as pageHeaderTemplate,
+  _i as paginationStyles,
+  fi as paginationTemplate,
   Sl as portalDirective,
   Il as primitiveColors,
   eo as progressStyles,
   Za as progressTemplate,
-  Ms as props,
-  xs as provideConfig,
-  ws as provideHttp,
-  Fs as provideRX,
+  Ps as props,
+  ws as provideConfig,
+  ks as provideHttp,
+  qs as provideRX,
   he as registerAttributeDirective,
   Le as render,
   $ as repeat,
-  qs as repeatRaw,
-  hn as resetStyles,
+  Bs as repeatRaw,
+  pn as resetStyles,
   pl as routerLinkDirective,
   Aa as selectStyles,
   Ea as selectTemplate,
   Ye as setActiveEffect,
   Nl as shadowTokens,
-  ae as shift,
-  ki as sidebarGroupStyles,
-  wi as sidebarGroupTemplate,
-  Ci as sidebarItemStyles,
-  $i as sidebarItemTemplate,
-  xi as sidebarStyles,
-  _i as sidebarTemplate,
+  oe as shift,
+  $i as sidebarGroupStyles,
+  ki as sidebarGroupTemplate,
+  Si as sidebarItemStyles,
+  Ci as sidebarItemTemplate,
+  wi as sidebarStyles,
+  yi as sidebarTemplate,
   P as signal,
-  vs as signupPageStyles,
-  ps as signupPageTemplate,
+  gs as signupPageStyles,
+  vs as signupPageTemplate,
   Ia as sliderStyles,
   Da as sliderTemplate,
   Pl as spacingTokens,
-  qi as stepPanelStyles,
-  Fi as stepPanelTemplate,
-  ji as stepStyles,
-  Ii as stepTemplate,
-  Di as stepsStyles,
-  Si as stepsTemplate,
+  Bi as stepPanelStyles,
+  qi as stepPanelTemplate,
+  Fi as stepStyles,
+  Mi as stepTemplate,
+  Ii as stepsStyles,
+  Ei as stepsTemplate,
   G as styleMap,
-  ui as tabPanelStyles,
-  mi as tabPanelTemplate,
-  ci as tabStyles,
-  di as tabTemplate,
-  Ro as tableStyles,
-  Eo as tableTemplate,
-  ni as tabsStyles,
-  ii as tabsTemplate,
+  hi as tabPanelStyles,
+  ui as tabPanelTemplate,
+  mi as tabStyles,
+  ci as tabTemplate,
+  To as tableStyles,
+  Ro as tableTemplate,
+  di as tabsStyles,
+  si as tabsTemplate,
   Ya as toastContainerStyles,
   Ua as toastContainerTemplate,
   Ga as toastStyles,
   Wa as toastTemplate,
-  rn as toggleTheme,
+  ln as toggleTheme,
   ql as tokensToCss,
   ra as tooltipDirective,
   Vl as transitionTokens,
   Ol as typographyTokens,
-  zs as unregisterAttributeDirective,
-  Bs as unsafeHTML,
-  pn as visuallyHiddenStyles,
+  As as unregisterAttributeDirective,
+  Hs as unsafeHTML,
+  vn as visuallyHiddenStyles,
   d as when
 };