@melodicdev/components 1.3.0 → 1.4.0

package/assets/melodic-components.min.js

@@ -1,5 +1,5 @@
 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) };
   };
@@ -151,7 +151,7 @@ function H(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,7 +362,7 @@ function kr(e, t) {
   }
   return r;
 }
-function ys(e) {
+function xs(e) {
   const t = e[tl], r = {
     ...e.base,
     ...t
@@ -370,7 +370,7 @@ function ys(e) {
   return e.extends ? kr(e.extends, r) : r;
 }
 const rl = te("APP_CONFIG");
-function xs(e) {
+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,
@@ -1114,13 +1118,13 @@ 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 Y(e) {
@@ -2015,19 +2019,19 @@ 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 = te("RX_INIT_STATE"), Ce = te("RX_ACTION_PROVIDERS"), Se = te("RX_EFFECTS_PROVIDERS"), Ir = te("RX_STATE_DEBUG");
@@ -2044,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);
   }
@@ -2158,7 +2162,7 @@ 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([ee(), j("design:paramtypes", [])], F);
-function Fs(e, t, r, l = !1) {
+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,
@@ -2411,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;
@@ -2548,7 +2552,7 @@ function G(e) {
     return a;
   });
 }
-function Bs(e) {
+function Hs(e) {
   return U((t, r) => {
     if (!r) {
       const l = t.parentNode;
@@ -2610,7 +2614,7 @@ function Sl(e, t, r) {
   };
 }
 he("portal", Sl);
-var Hs = class {
+var Ks = class {
   constructor() {
     this.__directive = !0;
   }
@@ -2834,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"
@@ -2916,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
@@ -3288,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,
@@ -3323,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(`
 	`)}
 
@@ -3397,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(`
 	`)}
 
@@ -3411,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() {
@@ -3436,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) {
@@ -3451,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);
 }
@@ -3782,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;
 }
@@ -3824,7 +3828,7 @@ function Ql(e, t = {}) {
     isActive: u
   };
 }
-function nn(e, t) {
+function dn(e, t) {
   const r = Ql(e, t);
   return r.activate(), () => r.deactivate();
 }
@@ -3838,10 +3842,10 @@ function Vr() {
     Q = !1;
   }, !0));
 }
-function dn() {
+function cn() {
   return Vr(), Q;
 }
-function cn(e, t = "focus-visible") {
+function mn(e, t = "focus-visible") {
   Vr();
   function r() {
     Q && e.classList.add(t);
@@ -3867,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",
@@ -3887,7 +3891,7 @@ function un(e = {}) {
     border: "0"
   }), a;
 }
-const hn = `
+const pn = `
 	*,
 	*::before,
 	*::after {
@@ -3932,7 +3936,7 @@ const hn = `
 	[hidden] {
 		display: none !important;
 	}
-`, pn = `
+`, vn = `
 	.visually-hidden {
 		position: absolute;
 		width: 1px;
@@ -3955,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);
@@ -3987,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);
@@ -6963,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:
@@ -6989,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);
 	}
@@ -8971,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%;
@@ -9309,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);
 	}
 
@@ -9406,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>
@@ -9505,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([_({
@@ -9519,7 +9532,8 @@ Dt = g([_({
     "variant",
     "size",
     "dot",
-    "pill"
+    "pill",
+    "color"
   ]
 })], Dt);
 function po(e) {
@@ -10213,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>
@@ -10337,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 {
@@ -10359,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;
@@ -10387,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,
@@ -10484,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>
@@ -10508,7 +10534,7 @@ function Eo(e) {
 		</div>
 	`;
 }
-const Ro = () => y`
+const To = () => y`
 	:host {
 		display: block;
 	}
@@ -10638,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 {
@@ -10751,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() {
@@ -10864,8 +10893,8 @@ var Vt = class {
 };
 Vt = g([_({
   selector: "ml-table",
-  template: Eo,
-  styles: Ro,
+  template: Ro,
+  styles: To,
   attributes: [
     "selectable",
     "striped",
@@ -10877,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({
@@ -11029,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>
@@ -11084,7 +11113,7 @@ function Ao(e) {
 		</div>
 	`;
 }
-const Do = () => y`
+const Io = () => y`
 	:host {
 		display: flex;
 		flex-direction: column;
@@ -11784,8 +11813,8 @@ var jt = class {
 };
 jt = g([_({
   selector: "ml-data-grid",
-  template: Ao,
-  styles: Do,
+  template: Do,
+  styles: Io,
   attributes: [
     "selectable",
     "striped",
@@ -11799,7 +11828,7 @@ jt = g([_({
     "show-filter-row"
   ]
 })], jt);
-var Io = [
+var Mo = [
   "January",
   "February",
   "March",
@@ -11849,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);
@@ -11867,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));
@@ -11878,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()}`;
 }
@@ -11925,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));
 }
@@ -11941,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) {
@@ -11997,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}` : "";
@@ -12009,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,
@@ -12021,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,
@@ -12031,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);
@@ -12039,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>
@@ -12059,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">
@@ -12084,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`
@@ -12132,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
@@ -12164,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">
@@ -12197,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"
@@ -12224,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
@@ -12242,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">
@@ -12289,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
@@ -12313,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">
@@ -12355,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>
@@ -12379,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">
@@ -12415,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);
@@ -13296,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();
@@ -13305,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;
@@ -13328,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);
@@ -13356,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", {
@@ -13368,8 +13397,8 @@ var Gt = class {
 };
 Gt = g([_({
   selector: "ml-calendar-view",
-  template: ri,
-  styles: li,
+  template: li,
+  styles: ai,
   attributes: [
     "view",
     "date",
@@ -13382,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;
@@ -13417,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
@@ -13442,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">
@@ -13451,7 +13480,7 @@ function ii(e) {
 		</div>
 	`;
 }
-function si(e, t) {
+function ni(e, t) {
   const r = e.value === t.value;
   return i`
 		<button
@@ -13474,7 +13503,7 @@ function si(e, t) {
 		</button>
 	`;
 }
-const ni = () => y`
+const di = () => y`
 	:host {
 		display: block;
 		width: 100%;
@@ -13816,8 +13845,8 @@ var Yt = class {
 };
 Yt = g([_({
   selector: "ml-tabs",
-  template: ii,
-  styles: ni,
+  template: si,
+  styles: di,
   attributes: [
     "value",
     "variant",
@@ -13826,7 +13855,7 @@ Yt = g([_({
     "routed"
   ]
 })], Yt);
-function di(e) {
+function ci(e) {
   return i`
 		<button
 			type="button"
@@ -13848,7 +13877,7 @@ function di(e) {
 		</button>
 	`;
 }
-const ci = () => y`
+const mi = () => y`
 	:host {
 		display: contents;
 	}
@@ -13909,8 +13938,8 @@ var Xt = class {
 };
 Xt = g([_({
   selector: "ml-tab",
-  template: di,
-  styles: ci,
+  template: ci,
+  styles: mi,
   attributes: [
     "value",
     "label",
@@ -13920,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;
 	}
@@ -13952,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">
@@ -13965,7 +13994,7 @@ function hi(e) {
 		</nav>
 	`;
 }
-const pi = () => y`
+const vi = () => y`
 	:host {
 		display: block;
 	}
@@ -13987,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
@@ -14017,7 +14046,7 @@ function vi(e) {
 		</li>
 	`;
 }
-const gi = () => y`
+const bi = () => y`
 	:host {
 		display: contents;
 	}
@@ -14085,8 +14114,8 @@ var Zt = class {
 };
 Zt = g([_({
   selector: "ml-breadcrumb-item",
-  template: vi,
-  styles: gi,
+  template: gi,
+  styles: bi,
   attributes: [
     "href",
     "icon",
@@ -14094,7 +14123,7 @@ Zt = g([_({
     "separator"
   ]
 })], Zt);
-function bi(e) {
+function fi(e) {
   return i`
 		<nav class="ml-pagination" aria-label="Pagination">
 			<button
@@ -14144,7 +14173,7 @@ function bi(e) {
 		</nav>
 	`;
 }
-const fi = () => y`
+const _i = () => y`
 	:host {
 		display: block;
 	}
@@ -14276,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
@@ -14307,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">
@@ -14336,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">
@@ -14419,7 +14448,7 @@ function Ne(e, t, r) {
 		</div>
 	`;
 }
-const xi = () => y`
+const wi = () => y`
 	:host {
 		display: block;
 		height: 100%;
@@ -14708,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) => {
@@ -14804,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`
@@ -14820,7 +14849,7 @@ function wi(e) {
 		</div>
 	`;
 }
-const ki = () => y`
+const $i = () => y`
 	:host {
 		display: block;
 	}
@@ -14855,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`
@@ -14930,7 +14959,7 @@ function $i(e) {
 		</div>
 	`;
 }
-const Ci = () => y`
+const Si = () => y`
 	:host {
 		display: block;
 	}
@@ -15081,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) {
@@ -15112,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",
@@ -15129,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
@@ -15146,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`
@@ -15161,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
@@ -15183,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">
@@ -15198,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>
@@ -15213,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`
@@ -15242,7 +15272,7 @@ function Ai(e, t, r, l) {
       return i``;
   }
 }
-const Di = () => y`
+const Ii = () => y`
 	:host {
 		display: block;
 		width: 100%;
@@ -15892,8 +15922,8 @@ var ar = class {
 };
 ar = g([_({
   selector: "ml-steps",
-  template: Si,
-  styles: Di,
+  template: Ei,
+  styles: Ii,
   attributes: [
     "active",
     "variant",
@@ -15904,7 +15934,7 @@ ar = g([_({
     "routed"
   ]
 })], ar);
-function Ii(e) {
+function Mi(e) {
   const t = e.variant === "bar", r = e.compact;
   return i`
 		<div
@@ -15925,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">
@@ -15940,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>
@@ -15955,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);
   }
@@ -15981,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">
@@ -15990,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;
 	}
@@ -16517,8 +16547,8 @@ var ir = class {
 };
 ir = g([_({
   selector: "ml-step",
-  template: Ii,
-  styles: ji,
+  template: Mi,
+  styles: Fi,
   attributes: [
     "value",
     "label",
@@ -16536,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;
 	}
@@ -16563,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>
@@ -16579,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;
 	}
@@ -16758,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);
   }
@@ -16801,7 +16831,7 @@ var Ki = class {
     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
@@ -16864,11 +16894,11 @@ var nr, Te = class {
 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
@@ -16903,7 +16933,7 @@ function Wi(e) {
 		</dialog>
 	`;
 }
-const Gi = () => y`
+const Ui = () => y`
 	:host {
 		display: contents;
 	}
@@ -17127,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}>
@@ -17152,7 +17182,7 @@ function Ui(e) {
 		</div>
 	`;
 }
-const Yi = () => y`
+const Xi = () => y`
 	:host {
 		display: inline-block;
 	}
@@ -17407,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({
@@ -17435,7 +17465,7 @@ function Xi(e) {
 		</div>
 	`;
 }
-const Ji = () => y`
+const Qi = () => y`
 	:host {
 		display: block;
 	}
@@ -17516,8 +17546,8 @@ var mr = class {
 };
 mr = g([_({
   selector: "ml-dropdown-item",
-  template: Xi,
-  styles: Ji,
+  template: Ji,
+  styles: Qi,
   attributes: [
     "value",
     "icon",
@@ -17526,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;
 	}
@@ -17544,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>`)}
@@ -17555,7 +17585,7 @@ function es(e) {
 		</div>
 	`;
 }
-const ts = () => y`
+const rs = () => y`
 	:host {
 		display: block;
 	}
@@ -17577,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
@@ -17607,7 +17637,7 @@ function rs(e) {
 		</div>
 	`;
 }
-const ls = () => y`
+const as = () => y`
 	:host {
 		display: inline-block;
 	}
@@ -17708,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}>
@@ -17732,7 +17762,7 @@ function as(e) {
 		</div>
 	`;
 }
-const os = () => y`
+const is = () => y`
 	:host {
 		display: inline-block;
 	}
@@ -17875,8 +17905,8 @@ var vr = class {
 };
 vr = g([_({
   selector: "ml-popover",
-  template: as,
-  styles: os,
+  template: os,
+  styles: is,
   attributes: [
     "placement",
     "offset",
@@ -17884,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
@@ -17939,7 +17969,7 @@ function is(e) {
 		</div>
 	`;
 }
-const ss = () => y`
+const ns = () => y`
 	:host {
 		display: block;
 		height: 100%;
@@ -18147,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
@@ -18216,7 +18246,7 @@ function ns(e) {
 		</section>
 	`;
 }
-const ds = () => y`
+const cs = () => y`
 	:host {
 		display: block;
 		width: 100%;
@@ -18488,8 +18518,8 @@ var br = class {
 };
 br = g([_({
   selector: "ml-hero-section",
-  template: ns,
-  styles: ds,
+  template: ds,
+  styles: cs,
   attributes: [
     "variant",
     "size",
@@ -18498,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
@@ -18550,7 +18580,7 @@ function cs(e) {
 		</header>
 	`;
 }
-const ms = () => y`
+const us = () => y`
 	:host {
 		display: block;
 	}
@@ -18746,8 +18776,8 @@ var fr = class {
 };
 fr = g([_({
   selector: "ml-page-header",
-  template: cs,
-  styles: ms,
+  template: ms,
+  styles: us,
   attributes: [
     "variant",
     "divider",
@@ -18755,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>
@@ -18981,7 +19011,7 @@ const Wr = `
 			padding: var(--ml-space-6);
 		}
 	}
-`, hs = () => y`
+`, ps = () => y`
 	${Wr}
 `;
 var _r = class {
@@ -18999,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>
@@ -19061,7 +19091,7 @@ function ps(e) {
 		</div>
 	`;
 }
-const vs = () => y`
+const gs = () => y`
 	${Wr}
 `;
 var yr = class {
@@ -19079,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>
@@ -19130,7 +19160,7 @@ function gs(e) {
 		</ml-app-shell>
 	`;
 }
-const bs = () => y`
+const fs = () => y`
 	:host {
 		display: block;
 		height: 100%;
@@ -19242,8 +19272,8 @@ var xr = class {
 };
 xr = g([_({
   selector: "ml-dashboard-page",
-  template: gs,
-  styles: bs,
+  template: bs,
+  styles: fs,
   attributes: [
     "title",
     "description",
@@ -19271,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,
+  Wi as DialogRef,
   Z as DialogService,
-  Hs as Directive,
+  Ks as Directive,
   Rt as DividerComponent,
   dr as DrawerComponent,
   cr as DropdownComponent,
@@ -19296,7 +19326,7 @@ export {
   Be as HttpClient,
   qe as HttpError,
   Ut as IconComponent,
-  fs as Inject,
+  _s as Inject,
   ee as Injectable,
   Gr as InjectionEngine,
   L as Injector,
@@ -19319,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,
@@ -19352,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,
+  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,
   te as createToken,
-  Us as createValidator,
+  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,
   ae as flip,
-  on as focusFirst,
-  sn as focusLast,
-  nn as focusTrap,
-  cn as focusVisible,
+  sn as focusFirst,
+  nn as focusLast,
+  dn as focusTrap,
+  mn as focusVisible,
   Dl as formControlDirective,
   Pa as formFieldStyles,
   Ma as formFieldTemplate,
@@ -19434,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,
+  an as injectTheme,
   Y as isDirective,
-  dn as isFocusVisible,
+  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,
   le as offset,
-  Ls as onAction,
-  tn as onThemeChange,
-  ms as pageHeaderStyles,
-  cs as pageHeaderTemplate,
-  fi as paginationStyles,
-  bi as paginationTemplate,
+  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,
   oe as shift,
-  ki as sidebarGroupStyles,
-  wi as sidebarGroupTemplate,
-  Ci as sidebarItemStyles,
-  $i as sidebarItemTemplate,
-  xi as sidebarStyles,
-  _i as sidebarTemplate,
+  $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
 };