@melodicdev/components 1.5.9 → 1.5.10

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 ws(e) {
+function fs(e) {
   return function(t, r, a) {
     t.params || (t.params = []), t.params[a] = { __injectionToken: O(e) };
   };
@@ -151,7 +151,7 @@ function H(e) {
 function te(e) {
   return Symbol(e);
 }
-async function ys(e = {}) {
+async function _s(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 xs(e) {
+function ws(e) {
   const t = e[ta], r = {
     ...e.base,
     ...t
@@ -370,7 +370,7 @@ function xs(e) {
   return e.extends ? kr(e.extends, r) : r;
 }
 const ra = te("APP_CONFIG");
-function ks(e) {
+function ys(e) {
   return (t) => {
     t.bindValue(ra, e);
   };
@@ -379,7 +379,7 @@ var De = class $r extends Error {
   constructor(t, r, a) {
     super(t), this.config = r, this.code = a, this.name = "HttpBaseError", Object.setPrototypeOf(this, $r.prototype);
   }
-}, Be = class Cr extends De {
+}, je = class Cr extends De {
   constructor(t, r, a) {
     super(t, a, `HTTP_${r.status}`), this.response = r, this.name = "HttpError", Object.setPrototypeOf(this, Cr.prototype);
   }
@@ -439,7 +439,7 @@ var De = class $r extends Error {
     }
     return t;
   }
-}, je = class {
+}, Be = class {
   constructor(e) {
     this._requestManager = new oa(), this._interceptors = {
       request: [],
@@ -539,10 +539,10 @@ var De = class $r extends Error {
         headers: r.headers,
         config: e
       };
-      if (!r.ok) throw new Be(`HTTP Error: ${r.status} ${r.statusText}`, a, e);
+      if (!r.ok) throw new je(`HTTP Error: ${r.status} ${r.statusText}`, a, e);
       return a;
     }).catch((r) => {
-      throw r instanceof Be ? r : r instanceof Error && r.name === "AbortError" ? new la("Request aborted", e) : new aa((r instanceof Error ? r.message : "Network error") || "Network error", e);
+      throw r instanceof je ? r : r instanceof Error && r.name === "AbortError" ? new la("Request aborted", e) : new aa((r instanceof Error ? r.message : "Network error") || "Network error", e);
     });
     return e.deduplicate === !0 && this._requestManager.addPendingRequest(e, t), await t;
   }
@@ -609,23 +609,23 @@ var De = 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 $s(e, t) {
+function xs(e, t) {
   return (r) => {
-    const a = new je(e);
-    r.bindValue(je, a), t?.request && t.request.forEach((l) => {
+    const a = new Be(e);
+    r.bindValue(Be, a), t?.request && t.request.forEach((l) => {
       a.interceptors.request(l);
     }), t?.response && t.response.forEach((l) => {
       a.interceptors.response(l);
     });
   };
 }
-function Cs(e) {
+function ks(e) {
   return { canActivate: e };
 }
-function zs(e) {
+function $s(e) {
   return { canDeactivate: e };
 }
-function Ss(e) {
+function Cs(e) {
   return { resolve: e };
 }
 var _e = class {
@@ -682,7 +682,7 @@ var _e = class {
   }
 };
 const ia = "melodic:route-context";
-var Es = class extends CustomEvent {
+var zs = class extends CustomEvent {
   constructor(e) {
     super(ia, {
       bubbles: !1,
@@ -1118,13 +1118,13 @@ function he(e, t) {
 function ma(e) {
   return Rr(e);
 }
-function Ds(e) {
+function Rs(e) {
   return Rr(e) !== void 0;
 }
-function As(e) {
+function Ts(e) {
   return K.delete(e);
 }
-function Is() {
+function Ds() {
   return Array.from(K.keys());
 }
 function Y(e) {
@@ -1180,13 +1180,13 @@ var ha = class J {
         else {
           if (k) {
             E = "__";
-            const B = k[1].charAt(0);
-            Object.keys(o).includes(B) && (E = B);
+            const j = k[1].charAt(0);
+            Object.keys(o).includes(j) && (E = j);
           }
           if (E === "__" && k) {
             l += ie(R), s = k[1];
-            const B = /(["'])$/.exec(k[0]);
-            n = B ? B[1] : null;
+            const j = /(["'])$/.exec(k[0]);
+            n = j ? j[1] : null;
           } else l = o[E](R, l, k ? k[1] : void 0, k);
         }
       }
@@ -1272,7 +1272,7 @@ var ha = class J {
           else if (E.value.includes(Ie)) {
             const D = this.parseAttributeValue(E.value);
             if (D) {
-              const S = D.indices.length > 1 || D.strings.some((B) => B.length > 0);
+              const S = D.indices.length > 1 || D.strings.some((j) => j.length > 0);
               m.push({
                 path: [...z],
                 type: "attribute",
@@ -2019,19 +2019,19 @@ function T(e) {
     r.destroy(), a();
   }, t;
 }
-const Os = () => () => ({}), Ls = (e, t) => ((r) => ({
+const Ps = () => () => ({}), Ms = (e, t) => ((r) => ({
   type: e,
   payload: r ?? (t ? t() : void 0)
 }));
-function Ns(...e) {
+function Os(...e) {
   return { reducers: e };
 }
-const qs = (e) => {
+const Ls = (e) => {
   const t = {};
   return Object.keys(e).forEach((r) => {
     t[r] = M(e[r]);
   }), t;
-}, Vs = (e, t) => ({
+}, Ns = (e, t) => ({
   action: e(),
   reducer: t
 }), $e = te("RX_INIT_STATE"), Ce = te("RX_ACTION_PROVIDERS"), ze = te("RX_EFFECTS_PROVIDERS"), Ir = te("RX_STATE_DEBUG");
@@ -2048,7 +2048,7 @@ var ga = class {
   getEffects() {
     return this._effects;
   }
-}, Fs = class extends ga {
+}, qs = class extends ga {
   constructor(e, t = { reducers: [] }, r = !1) {
     super(), this._initState = e, this._reducerConfig = t, this._debug = r, this._state = M(e);
   }
@@ -2162,7 +2162,7 @@ v([H(Ce), V("design:type", Object)], F.prototype, "_reducerMap", void 0);
 v([H(ze), V("design:type", Object)], F.prototype, "_effectMap", void 0);
 v([H(Ir), V("design:type", Boolean)], F.prototype, "_debug", void 0);
 F = v([ee(), V("design:paramtypes", [])], F);
-function js(e, t, r, a = !1) {
+function Fs(e, t, r, a = !1) {
   return (l) => {
     l.bindValue($e, e), l.bindValue(Ce, t), l.bindValue(ze, r), l.bindValue(Ir, a), l.bind(F, F, { dependencies: [
       $e,
@@ -2415,7 +2415,7 @@ function xa(e) {
     l[s] = o, o = t[o];
   return l;
 }
-function Hs(e, t, r) {
+function js(e, t, r) {
   return U((a, l) => {
     if (!l) {
       const o = a.parentNode;
@@ -2552,7 +2552,7 @@ function W(e) {
     return l;
   });
 }
-function Gs(e) {
+function Bs(e) {
   return U((t, r) => {
     if (!r) {
       const a = t.parentNode;
@@ -2614,7 +2614,7 @@ function za(e, t, r) {
   };
 }
 he("portal", za);
-var Ks = class {
+var Hs = class {
   constructor() {
     this.__directive = !0;
   }
@@ -2838,13 +2838,13 @@ var Ra = class {
     this.errors.set(t);
   }
 };
-function Ws(e, t) {
+function Gs(e, t) {
   return new Sa(e, t);
 }
-function Us(e, t) {
+function Ks(e, t) {
   return new Ra(e, t);
 }
-const Ys = {
+const Ws = {
   required: (e) => e == null || e === "" || Array.isArray(e) && e.length === 0 ? { required: {
     code: "required",
     message: "This field is required"
@@ -2920,13 +2920,13 @@ const Ys = {
     return a;
   }
 };
-function Xs(e, t, r) {
+function Us(e, t, r) {
   return (a) => t(a) ? null : { [e]: {
     code: e,
     message: typeof r == "function" ? r(a) : r
   } };
 }
-function Js(e, t, r) {
+function Ys(e, t, r) {
   return async (a) => await t(a) ? null : { [e]: {
     code: e,
     message: typeof r == "function" ? r(a) : r
@@ -3292,7 +3292,7 @@ const Ia = {
   "--ml-screen-lg": "1024px",
   "--ml-screen-xl": "1280px",
   "--ml-screen-2xl": "1536px"
-}, Qs = {
+}, Xs = {
   xs: 320,
   sm: 640,
   md: 768,
@@ -3309,11 +3309,11 @@ const Ia = {
   ...qa,
   ...Va
 };
-function Ba(e) {
+function ja(e) {
   return Object.entries(e).map(([t, r]) => `${t}: ${r};`).join(`
 	`);
 }
-const ja = {
+const Ba = {
   "--ml-color-background": "var(--ml-white)",
   "--ml-color-surface": "var(--ml-white)",
   "--ml-color-surface-raised": "var(--ml-gray-50)",
@@ -3327,8 +3327,8 @@ const ja = {
   "--ml-color-border": "var(--ml-gray-200)",
   "--ml-color-border-strong": "var(--ml-gray-300)",
   "--ml-color-border-muted": "var(--ml-gray-100)"
-}, Zs = `:root, [data-theme="light"] {
-	${Object.entries(ja).map(([e, t]) => `${e}: ${t};`).join(`
+}, Js = `:root, [data-theme="light"] {
+	${Object.entries(Ba).map(([e, t]) => `${e}: ${t};`).join(`
 	`)}
 
 	color-scheme: light;
@@ -3401,7 +3401,7 @@ const ja = {
   "--ml-tooltip-bg": "var(--ml-gray-100)",
   "--ml-tooltip-text": "var(--ml-gray-900)",
   "--ml-card-footer-bg": "var(--ml-gray-800)"
-}, en = `[data-theme="dark"] {
+}, Qs = `[data-theme="dark"] {
 	${Object.entries(et).map(([e, t]) => `${e}: ${t};`).join(`
 	`)}
 
@@ -3415,14 +3415,14 @@ const ja = {
 
 		color-scheme: dark;
 	}
-}`, tn = `:root {
-	${Ba(Fa)}
+}`, Zs = `:root {
+	${ja(Fa)}
 
 	/* Default to light color scheme */
 	color-scheme: light;
 }`;
 var ce = "system", Se = /* @__PURE__ */ new Set(), ne = null;
-function rn() {
+function en() {
   return ce;
 }
 function Ha() {
@@ -3440,13 +3440,13 @@ function Ga(e) {
   } else
     document.documentElement.setAttribute("data-theme", e), fe(e, e);
 }
-function an(e) {
+function tn(e) {
   return Se.add(e), () => Se.delete(e);
 }
 function fe(e, t) {
   Se.forEach((r) => r(e, t));
 }
-function ln() {
+function rn() {
   Ga(Ha() === "light" ? "dark" : "light");
 }
 function Or(e, t) {
@@ -3455,13 +3455,13 @@ function Or(e, t) {
 	`)}
 }`;
 }
-function on(e, t) {
+function an(e, t) {
   const r = Or(e, t), a = document.createElement("style");
   a.id = `ml-theme-${e}`, a.textContent = r;
   const l = document.getElementById(a.id);
   return l && l.remove(), document.head.appendChild(a), a;
 }
-function sn(e, t) {
+function ln(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);
 }
@@ -3786,11 +3786,11 @@ function Ja(e) {
   const t = Me(e);
   return t[t.length - 1] ?? null;
 }
-function nn(e) {
+function on(e) {
   const t = Nr(e);
   return t ? (t.focus(), !0) : !1;
 }
-function dn(e) {
+function sn(e) {
   const t = Ja(e);
   return t ? (t.focus(), !0) : !1;
 }
@@ -3828,7 +3828,7 @@ function Qa(e, t = {}) {
     isActive: p
   };
 }
-function cn(e, t) {
+function nn(e, t) {
   const r = Qa(e, t);
   return r.activate(), () => r.deactivate();
 }
@@ -3842,10 +3842,10 @@ function qr() {
     Q = !1;
   }, !0));
 }
-function mn() {
+function dn() {
   return qr(), Q;
 }
-function pn(e, t = "focus-visible") {
+function cn(e, t = "focus-visible") {
   qr();
   function r() {
     Q && e.classList.add(t);
@@ -3871,13 +3871,13 @@ function Za() {
     border: "0"
   }), document.body.appendChild(I)), I;
 }
-function hn(e, t = "polite") {
+function mn(e, t = "polite") {
   const r = Za();
   r.setAttribute("aria-live", t), r.textContent = "", setTimeout(() => {
     r.textContent = e;
   }, 50);
 }
-function un(e = {}) {
+function pn(e = {}) {
   const { id: t, priority: r = "polite", atomic: a = !0 } = e, l = document.createElement("div");
   return t && (l.id = t), l.setAttribute("aria-live", r), l.setAttribute("aria-atomic", a.toString()), l.setAttribute("role", "status"), Object.assign(l.style, {
     position: "absolute",
@@ -3891,7 +3891,7 @@ function un(e = {}) {
     border: "0"
   }), l;
 }
-const gn = `
+const hn = `
 	*,
 	*::before,
 	*::after {
@@ -3936,7 +3936,7 @@ const gn = `
 	[hidden] {
 		display: none !important;
 	}
-`, vn = `
+`, un = `
 	.visually-hidden {
 		position: absolute;
 		width: 1px;
@@ -3959,7 +3959,7 @@ const gn = `
 		clip: auto;
 		white-space: normal;
 	}
-`, bn = `
+`, gn = `
 	:host {
 		/* Inherit font from parent by default */
 		font-family: var(--ml-font-sans);
@@ -3991,7 +3991,7 @@ const gn = `
 		display: none !important;
 	}
 `;
-function fn(e, t) {
+function vn(e, t) {
   function r(a) {
     const l = a.target;
     e.contains(l) || t(a);
@@ -8280,23 +8280,33 @@ function Vl(e) {
 				</label>
 			`)}
 
-			<button
-				type="button"
-				class="ml-date-picker__trigger"
-				?disabled=${e.disabled}
-				aria-haspopup="dialog"
-				aria-expanded=${e.isOpen ? "true" : "false"}
-				@click=${e.toggleCalendar}
-				@keydown=${e.handleKeyDown}
-			>
-				<ml-icon icon="calendar-blank" size="sm" class="ml-date-picker__icon"></ml-icon>
-				<span class=${g({
-    "ml-date-picker__value": !0,
-    "ml-date-picker__value--placeholder": !e.value
-  })}>
-					${e.value ? e.displayValue : e.placeholder}
-				</span>
-			</button>
+			<div class="ml-date-picker__trigger">
+				<input
+					type="date"
+					class="ml-date-picker__input"
+					.value=${e.value}
+					min=${e.min}
+					max=${e.max}
+					placeholder=${e.placeholder}
+					?disabled=${e.disabled}
+					?required=${e.required}
+					aria-haspopup="dialog"
+					aria-expanded=${e.isOpen ? "true" : "false"}
+					@change=${e.handleInput}
+					@click=${e.handleInputClick}
+					@keydown=${e.handleKeyDown}
+				/>
+				<button
+					type="button"
+					class="ml-date-picker__calendar-btn"
+					?disabled=${e.disabled}
+					aria-label="Open calendar"
+					tabindex="-1"
+					@click=${e.toggleCalendar}
+				>
+					<ml-icon icon="calendar-blank" size="sm" class="ml-date-picker__icon"></ml-icon>
+				</button>
+			</div>
 
 			<div class="ml-date-picker__popover" popover="auto">
 				<ml-calendar
@@ -8387,32 +8397,24 @@ const Fl = () => w`
 		margin-left: var(--ml-space-0-5);
 	}
 
-	/* Trigger button */
+	/* Trigger wrapper */
 	.ml-date-picker__trigger {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-date-picker-gap);
 		width: 100%;
-		padding: var(--ml-date-picker-padding);
 		border: var(--ml-date-picker-border-width) solid var(--ml-date-picker-border-color);
 		border-radius: var(--ml-date-picker-border-radius);
 		background-color: var(--ml-date-picker-bg);
-		color: var(--ml-date-picker-color);
-		cursor: pointer;
-		font-family: var(--ml-date-picker-font-family);
-		font-size: var(--ml-date-picker-font-size);
-		text-align: left;
 		transition:
 			border-color var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing),
 			box-shadow var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing);
 	}
 
-	.ml-date-picker__trigger:hover:not(:disabled) {
+	.ml-date-picker__trigger:hover:not(:has(:disabled)) {
 		border-color: var(--ml-date-picker-hover-border-color);
 	}
 
-	.ml-date-picker__trigger:focus-visible {
-		outline: none;
+	.ml-date-picker__trigger:focus-within {
 		border-color: var(--ml-date-picker-focus-border-color);
 		box-shadow: var(--ml-date-picker-focus-shadow);
 	}
@@ -8426,7 +8428,7 @@ const Fl = () => w`
 		border-color: var(--ml-date-picker-error-border-color);
 	}
 
-	.ml-date-picker--error .ml-date-picker__trigger:focus-visible,
+	.ml-date-picker--error .ml-date-picker__trigger:focus-within,
 	.ml-date-picker--error.ml-date-picker--open .ml-date-picker__trigger {
 		box-shadow: var(--ml-date-picker-error-focus-shadow);
 	}
@@ -8437,39 +8439,73 @@ const Fl = () => w`
 		background-color: var(--ml-date-picker-disabled-bg);
 	}
 
+	/* Date input */
+	.ml-date-picker__input {
+		flex: 1;
+		min-width: 0;
+		border: none;
+		outline: none;
+		background: transparent;
+		color: var(--ml-date-picker-color);
+		font-family: var(--ml-date-picker-font-family);
+		font-size: var(--ml-date-picker-font-size);
+		padding: var(--ml-date-picker-padding);
+	}
+
+	/* Hide native date picker indicator across browsers */
+	.ml-date-picker__input::-webkit-calendar-picker-indicator {
+		display: none;
+		-webkit-appearance: none;
+	}
+
+	.ml-date-picker__input::-webkit-date-and-time-value {
+		text-align: left;
+	}
+
+	.ml-date-picker__input:disabled {
+		cursor: not-allowed;
+	}
+
 	/* Sizes */
-	.ml-date-picker--sm .ml-date-picker__trigger {
+	.ml-date-picker--sm .ml-date-picker__input {
 		padding: var(--ml-space-2) var(--ml-space-3);
 		font-size: var(--ml-text-sm);
 	}
 
-	.ml-date-picker--md .ml-date-picker__trigger {
+	.ml-date-picker--md .ml-date-picker__input {
 		padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		font-size: var(--ml-text-sm);
 	}
 
-	.ml-date-picker--lg .ml-date-picker__trigger {
+	.ml-date-picker--lg .ml-date-picker__input {
 		padding: var(--ml-space-3) var(--ml-space-3-5);
 		font-size: var(--ml-text-base);
 	}
 
-	/* Icon */
-	.ml-date-picker__icon {
-		flex-shrink: 0;
+	/* Calendar button */
+	.ml-date-picker__calendar-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		padding: 0 var(--ml-space-3) 0 0;
 		color: var(--ml-date-picker-icon-color);
+		transition: color var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing);
 	}
 
-	/* Value */
-	.ml-date-picker__value {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+	.ml-date-picker__calendar-btn:hover:not(:disabled) {
+		color: var(--ml-date-picker-color);
 	}
 
-	.ml-date-picker__value--placeholder {
-		color: var(--ml-date-picker-placeholder-color);
+	.ml-date-picker__calendar-btn:disabled {
+		cursor: not-allowed;
+	}
+
+	/* Icon */
+	.ml-date-picker__icon {
+		flex-shrink: 0;
 	}
 
 	/* Popover */
@@ -8521,46 +8557,27 @@ const Fl = () => w`
 		color: var(--ml-date-picker-error-color);
 	}
 `;
-var Bl = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-function jl(e) {
-  if (!e) return "";
-  const t = e.split("-");
-  if (t.length !== 3) return e;
-  const r = parseInt(t[1], 10) - 1, a = parseInt(t[2], 10), l = parseInt(t[0], 10);
-  return `${Bl[r]} ${a}, ${l}`;
-}
 var yt = class {
   constructor() {
     this.value = "", this.placeholder = "Select date", this.label = "", this.hint = "", this.error = "", this.size = "md", this.disabled = !1, this.required = !1, this.min = "", this.max = "", this.isOpen = !1, this._cleanupAutoUpdate = null, this.toggleCalendar = () => {
       if (this.disabled) return;
       const t = this.getPopoverEl();
       t && t.togglePopover();
+    }, this.handleInput = (t) => {
+      const r = t.target;
+      this.commitValue(r.value);
+    }, this.handleInputClick = () => {
+      this.isOpen || this.toggleCalendar();
     }, this.handleDateSelect = (t) => {
       t.stopPropagation();
       const r = t.detail;
       this.commitValue(r.value), this.closePopover();
     }, this.handleKeyDown = (t) => {
-      t.key === "Escape" && this.isOpen ? (t.preventDefault(), this.closePopover()) : (t.key === "Enter" || t.key === " " || t.key === "ArrowDown") && !this.isOpen && (t.preventDefault(), this.toggleCalendar());
+      t.key === "Escape" && this.isOpen && (t.preventDefault(), this.closePopover()), t.key === " " && (t.preventDefault(), this.isOpen || this.toggleCalendar()), (t.key === "F4" || t.altKey && t.key === "ArrowDown") && (t.preventDefault(), this.isOpen || this.toggleCalendar());
     }, this._handleToggle = (t) => {
       t.newState === "open" ? (this.isOpen = !0, this.startPositioning()) : (this.isOpen = !1, this._cleanupAutoUpdate?.(), this._cleanupAutoUpdate = null, this.returnFocus());
     };
   }
-  get displayValue() {
-    return jl(this.value);
-  }
   onCreate() {
     const t = this.getPopoverEl();
     t && t.addEventListener("toggle", this._handleToggle);
@@ -8599,9 +8616,12 @@ var yt = class {
     r.style.left = `${a}px`, r.style.top = `${l}px`;
   }
   returnFocus() {
-    const t = this.getTriggerEl();
+    const t = this.getInputEl();
     t && t.focus();
   }
+  getInputEl() {
+    return this.elementRef.shadowRoot?.querySelector(".ml-date-picker__input");
+  }
   getTriggerEl() {
     return this.elementRef.shadowRoot?.querySelector(".ml-date-picker__trigger");
   }
@@ -8626,7 +8646,7 @@ yt = v([_({
     "max"
   ]
 })], yt);
-function Hl(e) {
+function jl(e) {
   return i`
 		<div
 			class=${g({
@@ -8654,7 +8674,7 @@ function Hl(e) {
 		</div>
 	`;
 }
-const Gl = () => w`
+const Bl = () => w`
 	:host {
 		display: block;
 
@@ -8810,8 +8830,8 @@ var xt = class {
 };
 xt = v([_({
   selector: "ml-alert",
-  template: Hl,
-  styles: Gl,
+  template: jl,
+  styles: Bl,
   attributes: [
     "variant",
     "title",
@@ -8868,7 +8888,7 @@ var kt = class {
   }
 };
 kt = v([ee()], kt);
-function Kl(e) {
+function Hl(e) {
   return i`
 		<div
 			class=${g({
@@ -8892,7 +8912,7 @@ function Kl(e) {
 		</div>
 	`;
 }
-const Wl = () => w`
+const Gl = () => w`
 	:host {
 		display: block;
 
@@ -9048,8 +9068,8 @@ var $t = class {
 };
 $t = v([_({
   selector: "ml-toast",
-  template: Kl,
-  styles: Wl,
+  template: Hl,
+  styles: Gl,
   attributes: [
     "variant",
     "title",
@@ -9058,7 +9078,7 @@ $t = v([_({
     "dismissible"
   ]
 })], $t);
-function Ul(e) {
+function Kl(e) {
   return i`
 		<div
 			class=${g({
@@ -9070,7 +9090,7 @@ function Ul(e) {
 		</div>
 	`;
 }
-const Yl = () => w`
+const Wl = () => w`
 	:host {
 		display: block;
 	}
@@ -9139,11 +9159,11 @@ var Ct = class {
 };
 Ct = v([_({
   selector: "ml-toast-container",
-  template: Ul,
-  styles: Yl,
+  template: Kl,
+  styles: Wl,
   attributes: ["position"]
 })], Ct);
-function Xl(e) {
+function Ul(e) {
   const t = e.labelPosition === "top" && (!!e.label || e.showValue), r = e.labelPosition === "right" && e.showValue, a = e.labelPosition === "bottom" && e.showValue, l = e.labelPosition === "floating-top" && e.showValue, o = e.labelPosition === "floating-bottom" && e.showValue;
   return i`
 		<div class=${g({
@@ -9187,7 +9207,7 @@ function Xl(e) {
 		</div>
 	`;
 }
-function Jl(e) {
+function Yl(e) {
   return i`
 		<div class=${g({
     "ml-progress-circle": !0,
@@ -9230,7 +9250,7 @@ function Jl(e) {
 		</div>
 	`;
 }
-function Ql(e) {
+function Xl(e) {
   return i`
 		<div class=${g({
     "ml-progress-half": !0,
@@ -9269,10 +9289,10 @@ function Ql(e) {
 		</div>
 	`;
 }
-function Zl(e) {
-  return e.shape === "circle" ? Jl(e) : e.shape === "half-circle" ? Ql(e) : Xl(e);
+function Jl(e) {
+  return e.shape === "circle" ? Yl(e) : e.shape === "half-circle" ? Xl(e) : Ul(e);
 }
-const eo = () => w`
+const Ql = () => w`
 	:host {
 		display: block;
 
@@ -9668,8 +9688,8 @@ var zt = class {
 };
 zt = v([_({
   selector: "ml-progress",
-  template: Zl,
-  styles: eo,
+  template: Jl,
+  styles: Ql,
   attributes: [
     "value",
     "max",
@@ -9681,7 +9701,7 @@ zt = v([_({
     "label-position"
   ]
 })], zt);
-function to(e) {
+function Zl(e) {
   return i`
 		<div
 			class=${g({
@@ -9708,7 +9728,7 @@ function to(e) {
 		</div>
 	`;
 }
-const ro = () => w`
+const eo = () => w`
 	:host {
 		display: block;
 
@@ -9831,15 +9851,15 @@ var St = class {
 };
 St = v([_({
   selector: "ml-card",
-  template: to,
-  styles: ro,
+  template: Zl,
+  styles: eo,
   attributes: [
     "variant",
     "hoverable",
     "clickable"
   ]
 })], St);
-function ao(e) {
+function to(e) {
   return i`
 		<div
 			class=${g({
@@ -9858,7 +9878,7 @@ function ao(e) {
 		</div>
 	`;
 }
-const lo = () => w`
+const ro = () => w`
 	:host {
 		display: block;
 
@@ -9952,18 +9972,18 @@ var Et = class {
 };
 Et = v([_({
   selector: "ml-divider",
-  template: ao,
-  styles: lo,
+  template: to,
+  styles: ro,
   attributes: ["orientation"]
 })], Et);
-function oo(e) {
+function ao(e) {
   return i`
 		<div class="ml-stack" style=${W(e.getStyles())}>
 			<slot></slot>
 		</div>
 	`;
 }
-const io = () => w`
+const lo = () => w`
 	:host {
 		display: block;
 	}
@@ -10002,8 +10022,8 @@ var Rt = class {
 };
 Rt = v([_({
   selector: "ml-stack",
-  template: oo,
-  styles: io,
+  template: ao,
+  styles: lo,
   attributes: [
     "direction",
     "gap",
@@ -10012,14 +10032,14 @@ Rt = v([_({
     "wrap"
   ]
 })], Rt);
-function so(e) {
+function oo(e) {
   return i`
 		<div class="ml-container" style=${W(e.getStyles())}>
 			<slot></slot>
 		</div>
 	`;
 }
-const no = () => w`
+const io = () => w`
 	:host {
 		display: block;
 		width: 100%;
@@ -10051,15 +10071,15 @@ var Tt = class {
 };
 Tt = v([_({
   selector: "ml-container",
-  template: so,
-  styles: no,
+  template: oo,
+  styles: io,
   attributes: [
     "size",
     "padding",
     "centered"
   ]
 })], Tt);
-function co(e) {
+function so(e) {
   return i`
 		<span
 			class=${g({
@@ -10080,7 +10100,7 @@ function co(e) {
 		</span>
 	`;
 }
-const mo = () => w`
+const no = () => w`
 	:host {
 		display: inline-block;
 
@@ -10192,8 +10212,8 @@ var Dt = class {
 };
 Dt = v([_({
   selector: "ml-avatar",
-  template: co,
-  styles: mo,
+  template: so,
+  styles: no,
   attributes: [
     "src",
     "alt",
@@ -10202,7 +10222,7 @@ Dt = v([_({
     "rounded"
   ]
 })], Dt);
-function po(e) {
+function co(e) {
   const t = e.color ? `--ml-badge-bg: ${e.color}; --ml-badge-color: #fff` : "";
   return i`
 		<span
@@ -10221,7 +10241,7 @@ function po(e) {
 		</span>
 	`;
 }
-const ho = () => w`
+const mo = () => w`
 	:host {
 		display: inline-block;
 
@@ -10338,8 +10358,8 @@ var At = class {
 };
 At = v([_({
   selector: "ml-badge",
-  template: po,
-  styles: ho,
+  template: co,
+  styles: mo,
   attributes: [
     "variant",
     "size",
@@ -10348,7 +10368,7 @@ At = v([_({
     "color"
   ]
 })], At);
-function uo(e) {
+function po(e) {
   const t = e.badgePosition === "trailing";
   return i`
 		<span
@@ -10371,7 +10391,7 @@ function uo(e) {
 		</span>
 	`;
 }
-const go = () => w`
+const ho = () => w`
 	:host {
 		display: inline-block;
 
@@ -10524,8 +10544,8 @@ var It = class {
 };
 It = v([_({
   selector: "ml-badge-group",
-  template: uo,
-  styles: go,
+  template: po,
+  styles: ho,
   attributes: [
     "label",
     "variant",
@@ -10535,7 +10555,7 @@ It = v([_({
     "icon"
   ]
 })], It);
-function vo(e) {
+function uo(e) {
   const t = e["avatar-src"], r = e["dot-color"];
   return i`
 		<span
@@ -10586,7 +10606,7 @@ function vo(e) {
 		</span>
 	`;
 }
-const bo = () => w`
+const go = () => w`
 	:host {
 		display: inline-block;
 
@@ -10834,8 +10854,8 @@ var Pt = class {
 };
 Pt = v([_({
   selector: "ml-tag",
-  template: vo,
-  styles: bo,
+  template: uo,
+  styles: go,
   attributes: [
     "size",
     "dot",
@@ -10849,7 +10869,7 @@ Pt = v([_({
     "disabled"
   ]
 })], Pt);
-function fo(e) {
+function vo(e) {
   return i`
 		<div
 			class=${g({
@@ -10863,7 +10883,7 @@ function fo(e) {
 		</div>
 	`;
 }
-const _o = () => w`
+const bo = () => w`
 	:host {
 		display: block;
 
@@ -10902,11 +10922,11 @@ var Mt = class {
 };
 Mt = v([_({
   selector: "ml-list",
-  template: fo,
-  styles: _o,
+  template: vo,
+  styles: bo,
   attributes: ["variant", "size"]
 })], Mt);
-function wo(e) {
+function fo(e) {
   return i`
 		<div class="ml-li" role="listitem">
 			${d(e.hasLeadingSlot, () => i`
@@ -10927,7 +10947,7 @@ function wo(e) {
 		</div>
 	`;
 }
-const yo = () => w`
+const _o = () => w`
 	:host {
 		display: block;
 
@@ -11035,8 +11055,8 @@ var Ot = class {
 };
 Ot = v([_({
   selector: "ml-list-item",
-  template: wo,
-  styles: yo,
+  template: fo,
+  styles: _o,
   attributes: [
     "primary",
     "secondary",
@@ -11044,7 +11064,7 @@ Ot = v([_({
     "interactive"
   ]
 })], Ot);
-function xo(e) {
+function wo(e) {
   return i`
 		<div
 			class=${g({
@@ -11057,7 +11077,7 @@ function xo(e) {
 		</div>
 	`;
 }
-const ko = () => w`
+const yo = () => w`
 	:host {
 		display: block;
 
@@ -11092,11 +11112,11 @@ var Lt = class {
 };
 Lt = v([_({
   selector: "ml-activity-feed",
-  template: xo,
-  styles: ko,
+  template: wo,
+  styles: yo,
   attributes: ["variant"]
 })], Lt);
-function $o(e) {
+function xo(e) {
   return i`
 		<article class="ml-afi">
 			<div class="ml-afi__left">
@@ -11140,7 +11160,7 @@ function $o(e) {
 		</article>
 	`;
 }
-const Co = () => w`
+const ko = () => w`
 	:host {
 		display: block;
 
@@ -11317,7 +11337,7 @@ const Co = () => w`
 		background-color: var(--ml-activity-feed-item-indicator-error);
 	}
 `;
-var zo = /* @__PURE__ */ new Set([
+var $o = /* @__PURE__ */ new Set([
   "success",
   "warning",
   "error",
@@ -11329,7 +11349,7 @@ var zo = /* @__PURE__ */ new Set([
   }
   /** Whether the indicator-color is a preset name */
   get isPresetColor() {
-    return zo.has(this["indicator-color"]);
+    return $o.has(this["indicator-color"]);
   }
   /** Check if avatar slot has content */
   get hasAvatarSlot() {
@@ -11342,8 +11362,8 @@ var zo = /* @__PURE__ */ new Set([
 };
 Nt = v([_({
   selector: "ml-activity-feed-item",
-  template: $o,
-  styles: Co,
+  template: xo,
+  styles: ko,
   attributes: [
     "name",
     "timestamp",
@@ -11355,10 +11375,10 @@ Nt = v([_({
     "indicator-color"
   ]
 })], Nt);
-function So(e, t, r) {
+function Co(e, t, r) {
   return e.render ? e.render(t[e.key], t, r) : t[e.key] ?? "";
 }
-function Eo(e) {
+function zo(e) {
   return i`
 		<div class=${g({
     "ml-table": !0,
@@ -11452,7 +11472,7 @@ function Eo(e) {
       "ml-table__td": !0,
       [`ml-table__td--${l.align ?? "left"}`]: !0
     })}>
-											${So(l, t, a)}
+											${Co(l, t, a)}
 										</td>
 									`)}
 								</tr>
@@ -11476,7 +11496,7 @@ function Eo(e) {
 		</div>
 	`;
 }
-const Ro = () => w`
+const So = () => w`
 	:host {
 		display: block;
 
@@ -11761,9 +11781,9 @@ const Ro = () => w`
 		padding: var(--ml-space-2) var(--ml-space-4);
 	}
 `;
-var Fr = /* @__PURE__ */ new WeakSet(), To = EventTarget.prototype.addEventListener;
+var Fr = /* @__PURE__ */ new WeakSet(), Eo = 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), Eo.call(this, e, t, r);
 };
 var qt = class {
   constructor() {
@@ -11874,8 +11894,8 @@ var qt = class {
 };
 qt = v([_({
   selector: "ml-table",
-  template: Eo,
-  styles: Ro,
+  template: zo,
+  styles: So,
   attributes: [
     "selectable",
     "striped",
@@ -11887,12 +11907,12 @@ qt = v([_({
     "virtual"
   ]
 })], qt);
-function Do(e, t, r) {
+function Ro(e, t, r) {
   if (e.render) return e.render(t[e.key], t, r);
   const a = t[e.key];
   return a ?? "";
 }
-function Ao(e) {
+function To(e) {
   const t = e.gridTemplateColumns, r = e.totalGridWidth;
   return i`
 		<div class=${g({
@@ -12039,7 +12059,7 @@ function Ao(e) {
   })}
 										style=${o.pinned === "left" ? `left: ${e.getPinnedLeftOffset(o.key)}px` : ""}
 									>
-										${Do(o, a, e.startIndex + l)}
+										${Ro(o, a, e.startIndex + l)}
 									</div>
 								`)}
 							</div>
@@ -12094,7 +12114,7 @@ function Ao(e) {
 		</div>
 	`;
 }
-const Io = () => w`
+const Do = () => w`
 	:host {
 		display: flex;
 		flex-direction: column;
@@ -12850,8 +12870,8 @@ var Vt = class {
 };
 Vt = v([_({
   selector: "ml-data-grid",
-  template: Ao,
-  styles: Io,
+  template: To,
+  styles: Do,
   attributes: [
     "selectable",
     "striped",
@@ -12865,7 +12885,7 @@ Vt = v([_({
     "show-filter-row"
   ]
 })], Vt);
-var Po = [
+var Ao = [
   "January",
   "February",
   "March",
@@ -12891,7 +12911,7 @@ var Po = [
   "Oct",
   "Nov",
   "Dec"
-], Br = [
+], jr = [
   "Sunday",
   "Monday",
   "Tuesday",
@@ -12915,17 +12935,17 @@ function Ft(e) {
   const [t, r, a] = e.split("T")[0].split("-").map(Number);
   return new Date(t, r - 1, a);
 }
-function Mo(e, t) {
+function Io(e, t) {
   return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
-function jr(e) {
-  return Mo(e, /* @__PURE__ */ new Date());
+function Br(e) {
+  return Io(e, /* @__PURE__ */ new Date());
 }
 function G(e, t) {
   const r = new Date(e);
   return r.setDate(r.getDate() + t), r;
 }
-function Bt(e, t) {
+function jt(e, t) {
   const r = new Date(e);
   return r.setMonth(r.getMonth() + t), r;
 }
@@ -12933,20 +12953,20 @@ function Hr(e, t = 0) {
   const r = new Date(e), a = (r.getDay() - t + 7) % 7;
   return r.setDate(r.getDate() - a), r;
 }
-function Oo(e) {
+function Po(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));
   return Math.ceil(((t.getTime() - r.getTime()) / 864e5 + 1) / 7);
 }
-function j(e) {
+function B(e) {
   const t = new Date(e), r = t.getHours(), a = t.getMinutes(), l = r >= 12 ? "PM" : "AM", o = r % 12 || 12;
   return a === 0 ? `${o} ${l}` : `${o}:${String(a).padStart(2, "0")} ${l}`;
 }
-function jt(e) {
-  return `${Po[e.getMonth()]} ${e.getFullYear()}`;
+function Bt(e) {
+  return `${Ao[e.getMonth()]} ${e.getFullYear()}`;
 }
-function Lo(e, t) {
+function Mo(e, t) {
   const r = Ee[e.getMonth()], a = Ee[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()} – ${a} ${t.getDate()}, ${e.getFullYear()}` : `${r} ${e.getDate()}, ${e.getFullYear()} – ${a} ${t.getDate()}, ${t.getFullYear()}`;
 }
@@ -12991,7 +13011,7 @@ function Ht(e, t, r = 0) {
   }
   return c;
 }
-function No(e, t = 0) {
+function Oo(e, t = 0) {
   const r = Hr(e, t);
   return Array.from({ length: 7 }, (a, l) => G(r, l));
 }
@@ -13000,18 +13020,18 @@ function Gt(e = 0) {
     const a = (e + r) % 7;
     return {
       short: Oe[a],
-      full: Br[a]
+      full: jr[a]
     };
   });
 }
 function pe(e, t) {
   return e.filter((r) => r.start.split("T")[0] === t);
 }
-function qo(e) {
+function Lo(e) {
   return Ee[e.getMonth()];
 }
-function Vo(e) {
-  return Br[e.getDay()];
+function No(e) {
+  return jr[e.getDay()];
 }
 function P(e) {
   const t = new Date(e);
@@ -13063,7 +13083,7 @@ function Gr(e) {
   }
   return s;
 }
-function Fo() {
+function qo() {
   const e = [];
   for (let t = 0; t < 24; t++) for (let r = 0; r < 60; r += 30) {
     const a = t >= 12 ? "PM" : "AM", l = t % 12 || 12, o = r === 0 ? `${l} ${a}` : "";
@@ -13075,29 +13095,29 @@ function Fo() {
   }
   return e;
 }
-function Bo(e, t, r) {
-  return No(e, t).map((a) => {
+function Vo(e, t, r) {
+  return Oo(e, t).map((a) => {
     const l = L(a.getFullYear(), a.getMonth(), a.getDate()), o = pe(r, l).filter((s) => !s.allDay);
     return {
       date: l,
       dayLabel: Oe[a.getDay()],
       dayNumber: a.getDate(),
-      isToday: jr(a),
+      isToday: Br(a),
       events: Gr(o)
     };
   });
 }
-function jo(e, t) {
+function Fo(e, t) {
   const r = L(e.getFullYear(), e.getMonth(), e.getDate()), a = pe(t, r).filter((l) => !l.allDay);
   return {
     date: r,
     dayLabel: Oe[e.getDay()],
     dayNumber: e.getDate(),
-    isToday: jr(e),
+    isToday: Br(e),
     events: Gr(a)
   };
 }
-function Ho(e, t, r) {
+function jo(e, t, r) {
   const a = /* @__PURE__ */ new Set(), l = new Date(e, t + 1, 0).getDate();
   for (let o = 1; o <= l; o++) {
     const s = L(e, t, o);
@@ -13105,12 +13125,12 @@ function Ho(e, t, r) {
   }
   return a;
 }
-var Go = {
+var Bo = {
   month: "Month view",
   week: "Week view",
   day: "Day view"
 };
-function Ko(e) {
+function Ho(e) {
   return i`
 		<div class="ml-cv__today-badge">
 			<span class="ml-cv__today-badge-month">${e.todayMonthAbbrev}</span>
@@ -13125,7 +13145,7 @@ function Ko(e) {
 		</div>
 	`;
 }
-function Wo(e) {
+function Go(e) {
   return i`
 		${d(!e.hideNav, () => i`
 				<div class="ml-cv__nav-group">
@@ -13150,7 +13170,7 @@ function Wo(e) {
   })}
 						@click=${e.toggleViewDropdown}
 					>
-						${Go[e.view]}
+						${Bo[e.view]}
 						<ml-icon icon="caret-down" size="xs"></ml-icon>
 					</button>
 					${d(e.isViewDropdownOpen, () => i`
@@ -13198,20 +13218,20 @@ function Wo(e) {
 			`)}
 	`;
 }
-function Uo(e) {
+function Ko(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>`, () => Ho(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 Yo(e, t) {
+function Wo(e, t) {
   const r = t.color || "blue";
   return i`
 		<div
@@ -13224,13 +13244,13 @@ function Yo(e, t) {
   }}
 		>
 			${d(!t.allDay, () => i`
-				<span class="ml-cv__event-pill-time">${j(t.start)}</span>
+				<span class="ml-cv__event-pill-time">${B(t.start)}</span>
 			`)}
 			<span class="ml-cv__event-pill-title">${t.title}</span>
 		</div>
 	`;
 }
-function Xo(e) {
+function Uo(e) {
   const t = e.weekdayHeaders, r = e.monthGrid, a = (/* @__PURE__ */ new Date()).getDay(), l = e.weekStartsOn;
   return i`
 		<div class="ml-cv__month">
@@ -13263,7 +13283,7 @@ function Xo(e) {
     })}>${o.date}</div>
 
 							<div class="ml-cv__day-events">
-								${$(s, (c) => c.id, (c) => Yo(e, c))}
+								${$(s, (c) => c.id, (c) => Wo(e, c))}
 								${d(n > 0, () => i`
 									<button
 										type="button"
@@ -13290,7 +13310,7 @@ function Xo(e) {
 		</div>
 	`;
 }
-function Jo(e, t, r) {
+function Yo(e, t, r) {
   const a = t.event.color || "blue";
   return i`
 		<div
@@ -13304,11 +13324,11 @@ function Jo(e, t, r) {
   }}
 		>
 			<div class="ml-cv__time-event-title">${t.event.title}</div>
-			<div class="ml-cv__time-event-time">${j(t.event.start)} – ${j(t.event.end)}</div>
+			<div class="ml-cv__time-event-time">${B(t.event.start)} – ${B(t.event.end)}</div>
 		</div>
 	`;
 }
-function Qo(e) {
+function Xo(e) {
   const t = e.weekColumns, r = e.timeSlots;
   return i`
 		<div class="ml-cv__time-layout">
@@ -13355,13 +13375,13 @@ function Qo(e) {
 					${$(t.flatMap((a, l) => a.events.map((o) => ({
     pe: o,
     colIdx: l
-  }))), (a) => a.pe.event.id, (a) => Jo(e, a.pe, a.colIdx))}
+  }))), (a) => a.pe.event.id, (a) => Yo(e, a.pe, a.colIdx))}
 				</div>
 			</div>
 		</div>
 	`;
 }
-function Zo(e, t) {
+function Jo(e, t) {
   const r = t.event.color || "blue";
   return i`
 		<div
@@ -13375,11 +13395,11 @@ function Zo(e, t) {
   }}
 		>
 			<div class="ml-cv__time-event-title">${t.event.title}</div>
-			<div class="ml-cv__time-event-time">${j(t.event.start)} – ${j(t.event.end)}</div>
+			<div class="ml-cv__time-event-time">${B(t.event.start)} – ${B(t.event.end)}</div>
 		</div>
 	`;
 }
-function ei(e) {
+function Qo(e) {
   const t = e.miniCalendarGrid, r = e.miniCalendarWeekdays, a = e.miniCalendarDots, l = e.currentIsoDate;
   return i`
 		<div class="ml-cv__mini-cal">
@@ -13421,7 +13441,7 @@ function ei(e) {
 		</div>
 	`;
 }
-function ti(e) {
+function Zo(e) {
   const t = e.dayEvents;
   return i`
 		<div class="ml-cv__sidebar-title">Events for ${e.dayViewDateLabel}</div>
@@ -13436,7 +13456,7 @@ function ti(e) {
 							<div class="ml-cv__sidebar-event-content">
 								<div class="ml-cv__sidebar-event-title">${r.title}</div>
 								<div class="ml-cv__sidebar-event-time">
-									${r.allDay ? "All day" : `${j(r.start)} – ${j(r.end)}`}
+									${r.allDay ? "All day" : `${B(r.start)} – ${B(r.end)}`}
 								</div>
 							</div>
 						</div>
@@ -13445,7 +13465,7 @@ function ti(e) {
 		`)}
 	`;
 }
-function ri(e) {
+function ei(e) {
   const t = e.dayColumn, r = e.timeSlots;
   return i`
 		<div class="ml-cv__day-layout">
@@ -13481,30 +13501,30 @@ function ri(e) {
 							`)}
 
 							<!-- Events -->
-							${$(t.events, (a) => a.event.id, (a) => Zo(e, a))}
+							${$(t.events, (a) => a.event.id, (a) => Jo(e, a))}
 						</div>
 					</div>
 				</div>
 			</div>
 
 			<div class="ml-cv__day-sidebar">
-				${ei(e)}
-				${ti(e)}
+				${Qo(e)}
+				${Zo(e)}
 			</div>
 		</div>
 	`;
 }
-function ai(e) {
+function ti(e) {
   return i`
 		<div class="ml-cv">
-			${Uo(e)}
-			${d(e.view === "month", () => Xo(e))}
-			${d(e.view === "week", () => Qo(e))}
-			${d(e.view === "day", () => ri(e))}
+			${Ko(e)}
+			${d(e.view === "month", () => Uo(e))}
+			${d(e.view === "week", () => Xo(e))}
+			${d(e.view === "day", () => ei(e))}
 		</div>
 	`;
 }
-const li = () => w`
+const ri = () => w`
 	:host {
 		display: block;
 		font-family: var(--ml-font-sans);
@@ -14342,11 +14362,11 @@ var Wt = class {
     this.view = "month", this.date = "", this.weekStartsOn = 0, this.maxVisibleEvents = 3, this.addButtonText = "Add event", this.hideNav = !1, this.hideTodayButton = !1, this.hideViewSelector = !1, this.hideAddButton = !1, this.events = [], this.isViewDropdownOpen = !1, this._miniCalYear = 0, this._miniCalMonth = 0, this._hasScrolledToTime = !1, this._boundCloseDropdown = null, this.navigatePrev = () => {
       const t = this._currentDate;
       let r;
-      this.view === "month" ? r = Bt(t, -1) : this.view === "week" ? r = G(t, -7) : r = G(t, -1), this.setDate(r);
+      this.view === "month" ? r = jt(t, -1) : this.view === "week" ? r = G(t, -7) : r = G(t, -1), this.setDate(r);
     }, this.navigateNext = () => {
       const t = this._currentDate;
       let r;
-      this.view === "month" ? r = Bt(t, 1) : this.view === "week" ? r = G(t, 7) : r = G(t, 1), this.setDate(r);
+      this.view === "month" ? r = jt(t, 1) : this.view === "week" ? r = G(t, 7) : r = G(t, 1), this.setDate(r);
     }, this.goToToday = () => {
       this.setDate(/* @__PURE__ */ new Date());
     }, this.toggleViewDropdown = () => {
@@ -14428,24 +14448,24 @@ var Wt = class {
     }
   }
   get todayMonthAbbrev() {
-    return qo(/* @__PURE__ */ new Date());
+    return Lo(/* @__PURE__ */ new Date());
   }
   get todayDayNumber() {
     return (/* @__PURE__ */ new Date()).getDate();
   }
   get headerTitle() {
-    return jt(this._currentDate);
+    return Bt(this._currentDate);
   }
   get weekNumber() {
-    return Oo(this._currentDate);
+    return Po(this._currentDate);
   }
   get headerSubtitle() {
     if (this.view === "month") return `Week ${this.weekNumber}`;
     if (this.view === "week") {
       const t = Hr(this._currentDate, this.weekStartsOn);
-      return Lo(t, G(t, 6));
+      return Mo(t, G(t, 6));
     }
-    return Vo(this._currentDate);
+    return No(this._currentDate);
   }
   get currentIsoDate() {
     const t = this._currentDate;
@@ -14460,13 +14480,13 @@ var Wt = class {
     return r;
   }
   get weekColumns() {
-    return Bo(this._currentDate, this.weekStartsOn, this.events);
+    return Vo(this._currentDate, this.weekStartsOn, this.events);
   }
   get timeSlots() {
-    return Fo();
+    return qo();
   }
   get dayColumn() {
-    return jo(this._currentDate, this.events);
+    return Fo(this._currentDate, this.events);
   }
   get dayEvents() {
     return pe(this.events, this.currentIsoDate);
@@ -14479,7 +14499,7 @@ var Wt = class {
     });
   }
   get miniCalendarTitle() {
-    return jt(new Date(this._miniCalYear, this._miniCalMonth, 1));
+    return Bt(new Date(this._miniCalYear, this._miniCalMonth, 1));
   }
   get miniCalendarWeekdays() {
     return Gt(this.weekStartsOn).map((t) => t.short.charAt(0));
@@ -14488,7 +14508,7 @@ var Wt = class {
     return Ht(this._miniCalYear, this._miniCalMonth, this.weekStartsOn);
   }
   get miniCalendarDots() {
-    return Ho(this._miniCalYear, this._miniCalMonth, this.events);
+    return jo(this._miniCalYear, this._miniCalMonth, this.events);
   }
   setDate(t) {
     this.date = L(t.getFullYear(), t.getMonth(), t.getDate()), this._miniCalYear = t.getFullYear(), this._miniCalMonth = t.getMonth(), this.elementRef.dispatchEvent(new CustomEvent("ml:date-change", {
@@ -14500,8 +14520,8 @@ var Wt = class {
 };
 Wt = v([_({
   selector: "ml-calendar-view",
-  template: ai,
-  styles: li,
+  template: ti,
+  styles: ri,
   attributes: [
     "view",
     "date",
@@ -14514,7 +14534,7 @@ Wt = v([_({
     "hide-add-button"
   ]
 })], Wt);
-const oi = {
+const ai = {
   acorn: "",
   activity: "",
   "address-book": "",
@@ -16045,7 +16065,7 @@ const oi = {
   yarn: "",
   "yin-yang": "",
   "youtube-logo": ""
-}, ii = (e) => i`<i class="${e.format === "regular" ? "ph" : `ph-${e.format}`}">${oi[e.icon] ?? ""}</i>`, si = () => w`
+}, li = (e) => i`<i class="${e.format === "regular" ? "ph" : `ph-${e.format}`}">${ai[e.icon] ?? ""}</i>`, oi = () => w`
 	:host {
 		display: inline-flex;
 		align-items: center;
@@ -16098,15 +16118,15 @@ var Ut = class {
 };
 Ut = v([_({
   selector: "ml-icon",
-  template: ii,
-  styles: si,
+  template: li,
+  styles: oi,
   attributes: [
     "icon",
     "format",
     "size"
   ]
 })], Ut);
-function ni(e) {
+function ii(e) {
   const t = e.tabs.length > 0;
   return i`
 		<div
@@ -16123,7 +16143,7 @@ function ni(e) {
 				aria-orientation=${e.orientation}
 				@keydown=${e.handleKeyDown}
 			>
-				${t ? $(e.tabs, (r) => `${r.value}-${e.value === r.value}`, (r) => di(e, r)) : i`<slot name="tab" @slotchange=${e.handleTabSlotChange}></slot>`}
+				${t ? $(e.tabs, (r) => `${r.value}-${e.value === r.value}`, (r) => si(e, r)) : i`<slot name="tab" @slotchange=${e.handleTabSlotChange}></slot>`}
 			</div>
 
 			<div class="ml-tabs__panels">
@@ -16132,7 +16152,7 @@ function ni(e) {
 		</div>
 	`;
 }
-function di(e, t) {
+function si(e, t) {
   const r = e.value === t.value;
   return i`
 		<button
@@ -16155,7 +16175,7 @@ function di(e, t) {
 		</button>
 	`;
 }
-const ci = () => w`
+const ni = () => w`
 	:host {
 		/* Tab list */
 		--ml-tabs-list-gap: var(--ml-space-1);
@@ -16566,8 +16586,8 @@ var Yt = class {
 };
 Yt = v([_({
   selector: "ml-tabs",
-  template: ni,
-  styles: ci,
+  template: ii,
+  styles: ni,
   attributes: [
     "value",
     "variant",
@@ -16576,7 +16596,7 @@ Yt = v([_({
     "routed"
   ]
 })], Yt);
-function mi(e) {
+function di(e) {
   return i`
 		<button
 			type="button"
@@ -16598,7 +16618,7 @@ function mi(e) {
 		</button>
 	`;
 }
-const pi = () => w`
+const ci = () => w`
 	:host {
 		/* Tab base */
 		--ml-tab-gap: var(--ml-space-2);
@@ -16683,8 +16703,8 @@ var Xt = class {
 };
 Xt = v([_({
   selector: "ml-tab",
-  template: mi,
-  styles: pi,
+  template: di,
+  styles: ci,
   attributes: [
     "value",
     "label",
@@ -16694,14 +16714,14 @@ Xt = v([_({
     "href"
   ]
 })], Xt);
-function hi(e) {
+function mi(e) {
   return i`
 		<div class="ml-tab-panel" role="tabpanel">
 			<slot></slot>
 		</div>
 	`;
 }
-const ui = () => w`
+const pi = () => w`
 	:host {
 		display: block;
 	}
@@ -16726,11 +16746,11 @@ var Jt = class {
 };
 Jt = v([_({
   selector: "ml-tab-panel",
-  template: hi,
-  styles: ui,
+  template: mi,
+  styles: pi,
   attributes: ["value"]
 })], Jt);
-function gi(e) {
+function hi(e) {
   return i`
 		<nav class="ml-breadcrumb" aria-label="Breadcrumb">
 			<ol class="ml-breadcrumb__list">
@@ -16739,7 +16759,7 @@ function gi(e) {
 		</nav>
 	`;
 }
-const vi = () => w`
+const ui = () => w`
 	:host {
 		/* Gap between breadcrumb items */
 		--ml-breadcrumb-gap: var(--ml-space-1);
@@ -16764,11 +16784,11 @@ var Qt = class {
 };
 Qt = v([_({
   selector: "ml-breadcrumb",
-  template: gi,
-  styles: vi,
+  template: hi,
+  styles: ui,
   attributes: ["separator"]
 })], Qt);
-function bi(e) {
+function gi(e) {
   const t = e.separator === "slash" ? "slash-forward" : "caret-right";
   return i`
 		<li
@@ -16794,7 +16814,7 @@ function bi(e) {
 		</li>
 	`;
 }
-const fi = () => w`
+const vi = () => w`
 	:host {
 		display: contents;
 	}
@@ -16862,8 +16882,8 @@ var Zt = class {
 };
 Zt = v([_({
   selector: "ml-breadcrumb-item",
-  template: bi,
-  styles: fi,
+  template: gi,
+  styles: vi,
   attributes: [
     "href",
     "icon",
@@ -16871,7 +16891,7 @@ Zt = v([_({
     "separator"
   ]
 })], Zt);
-function _i(e) {
+function bi(e) {
   return i`
 		<nav class="ml-pagination" aria-label="Pagination">
 			<button
@@ -16921,7 +16941,7 @@ function _i(e) {
 		</nav>
 	`;
 }
-const wi = () => w`
+const fi = () => w`
 	:host {
 		/* Layout */
 		--ml-pagination-gap: var(--ml-space-3);
@@ -17089,15 +17109,15 @@ var er = class {
 };
 er = v([_({
   selector: "ml-pagination",
-  template: _i,
-  styles: wi,
+  template: bi,
+  styles: fi,
   attributes: [
     "page",
     "total-pages",
     "siblings"
   ]
 })], er);
-function yi(e) {
+function _i(e) {
   const t = e.navigation.length > 0, r = e.footerNavigation.length > 0, a = e.collapsed;
   return i`
 		<aside
@@ -17120,7 +17140,7 @@ function yi(e) {
 			`)}
 
 			<div class="ml-sidebar__main">
-				${t ? $(e.navigation, (l, o) => `nav-group-${o}`, (l) => xi(e, l)) : i`<slot @slotchange=${e.handleDefaultSlotChange}></slot>`}
+				${t ? $(e.navigation, (l, o) => `nav-group-${o}`, (l) => wi(e, l)) : i`<slot @slotchange=${e.handleDefaultSlotChange}></slot>`}
 			</div>
 
 			<div class="ml-sidebar__footer">
@@ -17149,7 +17169,7 @@ function yi(e) {
 		</aside>
 	`;
 }
-function xi(e, t) {
+function wi(e, t) {
   const r = e.collapsed;
   return i`
 		<div class="ml-sidebar__group">
@@ -17232,7 +17252,7 @@ function Le(e, t, r) {
 		</div>
 	`;
 }
-const ki = () => w`
+const yi = () => w`
 	:host {
 		/* Container */
 		--ml-sidebar-width: 280px;
@@ -17738,11 +17758,11 @@ var tr = class {
 };
 tr = v([_({
   selector: "ml-sidebar",
-  template: yi,
-  styles: ki,
+  template: _i,
+  styles: yi,
   attributes: ["variant", "active"]
 })], tr);
-function $i(e) {
+function xi(e) {
   return i`
 		<div class="ml-sidebar-group">
 			${d(!!e.label && !e.collapsed, () => i`
@@ -17754,7 +17774,7 @@ function $i(e) {
 		</div>
 	`;
 }
-const Ci = () => w`
+const ki = () => w`
 	:host {
 		--ml-sidebar-group-padding-y: var(--ml-space-1);
 		--ml-sidebar-group-label-padding-y: var(--ml-space-2);
@@ -17799,11 +17819,11 @@ var rr = class {
 };
 rr = v([_({
   selector: "ml-sidebar-group",
-  template: $i,
-  styles: Ci,
+  template: xi,
+  styles: ki,
   attributes: ["label", "collapsed"]
 })], rr);
-function zi(e) {
+function $i(e) {
   const t = parseInt(e.level, 10) || 0, r = e.collapsed, a = i`
 		<div class="ml-sidebar-item__leading">
 			<slot name="leading">
@@ -17874,7 +17894,7 @@ function zi(e) {
 		</div>
 	`;
 }
-const Si = () => w`
+const Ci = () => w`
 	:host {
 		/* Item link */
 		--ml-sidebar-item-gap: var(--ml-space-3);
@@ -18130,8 +18150,8 @@ var ar = class {
 };
 ar = v([_({
   selector: "ml-sidebar-item",
-  template: zi,
-  styles: Si,
+  template: $i,
+  styles: Ci,
   attributes: [
     "icon",
     "icon-format",
@@ -18148,7 +18168,7 @@ ar = v([_({
     "level"
   ]
 })], ar);
-function Ei(e) {
+function zi(e) {
   const t = e.steps.length > 0, r = e.compact;
   return i`
 		<div
@@ -18165,7 +18185,7 @@ function Ei(e) {
 				aria-orientation=${e.orientation}
 				@keydown=${e.handleKeyDown}
 			>
-				${t ? $(e.steps, (a) => `${a.value}-${e.active === a.value}`, (a, l) => Ri(e, a, l)) : i`<slot name="step" @slotchange=${e.handleStepSlotChange}></slot>`}
+				${t ? $(e.steps, (a) => `${a.value}-${e.active === a.value}`, (a, l) => Si(e, a, l)) : i`<slot name="step" @slotchange=${e.handleStepSlotChange}></slot>`}
 			</div>
 
 			${d(r, () => i`
@@ -18180,7 +18200,7 @@ function Ei(e) {
 		</div>
 	`;
 }
-function Ri(e, t, r) {
+function Si(e, t, r) {
   const a = e.steps, l = r === 0, o = r === a.length - 1, s = e.getStepStatus(t.value), n = e.variant === "bar", c = e.compact;
   return i`
 		<div
@@ -18202,13 +18222,13 @@ function Ri(e, t, r) {
 			tabindex=${s === "current" ? "0" : "-1"}
 			@click=${() => e.handleStepClick(t.value, t.href)}
 		>
-			${d(n, () => Ti(e, t))}
-			${d(!n && !c, () => Di(e, t, r, l, o, s))}
-			${d(!n && c, () => Ai(e, s))}
+			${d(n, () => Ei(e, t))}
+			${d(!n && !c, () => Ri(e, t, r, l, o, s))}
+			${d(!n && c, () => Ti(e, s))}
 		</div>
 	`;
 }
-function Ti(e, t) {
+function Ei(e, t) {
   return i`
 		<div class="ml-step__bar"></div>
 		<div class="ml-step__content">
@@ -18217,12 +18237,12 @@ function Ti(e, t) {
 		</div>
 	`;
 }
-function Di(e, t, r, a, l, o) {
+function Ri(e, t, r, a, l, o) {
   return i`
 		<div class="ml-step__track">
 			<div class="ml-step__connector-before ${a ? "ml-step__connector--hidden" : `ml-step__connector--${e.connector}`}"></div>
 			<div class="ml-step__indicator">
-				${Ii(e, t, r, o)}
+				${Di(e, t, r, o)}
 			</div>
 			<div class="ml-step__connector-after ${l ? "ml-step__connector--hidden" : `ml-step__connector--${e.connector}`}"></div>
 		</div>
@@ -18232,10 +18252,10 @@ function Di(e, t, r, a, l, o) {
 		</div>
 	`;
 }
-function Ai(e, t) {
+function Ti(e, t) {
   return i`<div class="ml-step__dot"></div>`;
 }
-function Ii(e, t, r, a) {
+function Di(e, t, r, a) {
   switch (e.variant) {
     case "numbered":
       return i`
@@ -18261,7 +18281,7 @@ function Ii(e, t, r, a) {
       return i``;
   }
 }
-const Pi = () => w`
+const Ai = () => w`
 	:host {
 		/* Compact label */
 		--ml-steps-compact-gap: var(--ml-space-3);
@@ -18989,8 +19009,8 @@ var lr = class {
 };
 lr = v([_({
   selector: "ml-steps",
-  template: Ei,
-  styles: Pi,
+  template: zi,
+  styles: Ai,
   attributes: [
     "active",
     "variant",
@@ -19001,7 +19021,7 @@ lr = v([_({
     "routed"
   ]
 })], lr);
-function Mi(e) {
+function Ii(e) {
   const t = e.variant === "bar", r = e.compact;
   return i`
 		<div
@@ -19022,13 +19042,13 @@ function Mi(e) {
 			tabindex=${e.status === "current" ? "0" : "-1"}
 			@click=${e.handleClick}
 		>
-			${d(t, () => Oi(e))}
-			${d(!t && !r, () => Li(e))}
-			${d(!t && r, () => Ni(e))}
+			${d(t, () => Pi(e))}
+			${d(!t && !r, () => Mi(e))}
+			${d(!t && r, () => Oi(e))}
 		</div>
 	`;
 }
-function Oi(e) {
+function Pi(e) {
   return i`
 		<div class="ml-step__bar"></div>
 		<div class="ml-step__content">
@@ -19037,12 +19057,12 @@ function Oi(e) {
 		</div>
 	`;
 }
-function Li(e) {
+function Mi(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">
-				${qi(e)}
+				${Li(e)}
 			</div>
 			<div class="ml-step__connector-after ${e.last ? "ml-step__connector--hidden" : `ml-step__connector--${e.connector}`}"></div>
 		</div>
@@ -19052,19 +19072,19 @@ function Li(e) {
 		</div>
 	`;
 }
-function Ni(e) {
+function Oi(e) {
   return i`
 		<div class="ml-step__dot"></div>
 	`;
 }
-function qi(e) {
+function Li(e) {
   switch (e.variant) {
     case "numbered":
       return or(e);
     case "circles":
-      return Vi(e);
+      return Ni(e);
     case "icons":
-      return Fi(e);
+      return qi(e);
     default:
       return or(e);
   }
@@ -19078,7 +19098,7 @@ function or(e) {
 		</div>
 	`;
 }
-function Vi(e) {
+function Ni(e) {
   const t = e.status === "completed";
   return i`
 		<div class="ml-step__indicator-inner ml-step__indicator-inner--circles">
@@ -19087,14 +19107,14 @@ function Vi(e) {
 		</div>
 	`;
 }
-function Fi(e) {
+function qi(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 Bi = () => w`
+const Vi = () => w`
 	:host {
 		/* Focus ring */
 		--ml-step-focus-color: var(--ml-color-primary);
@@ -19680,8 +19700,8 @@ var ir = class {
 };
 ir = v([_({
   selector: "ml-step",
-  template: Mi,
-  styles: Bi,
+  template: Ii,
+  styles: Vi,
   attributes: [
     "value",
     "label",
@@ -19699,14 +19719,14 @@ ir = v([_({
     "compact"
   ]
 })], ir);
-function ji(e) {
+function Fi(e) {
   return i`
 		<div class="ml-step-panel" role="tabpanel">
 			<slot></slot>
 		</div>
 	`;
 }
-const Hi = () => w`
+const ji = () => w`
 	:host {
 		display: block;
 	}
@@ -19726,11 +19746,11 @@ var sr = class {
 };
 sr = v([_({
   selector: "ml-step-panel",
-  template: ji,
-  styles: Hi,
+  template: Fi,
+  styles: ji,
   attributes: ["value"]
 })], sr);
-const Gi = () => i`<dialog class="ml-dialog">
+const Bi = () => i`<dialog class="ml-dialog">
 		<div class="ml-dialog-header">
 			<slot name="dialog-header"></slot>
 		</div>
@@ -19742,7 +19762,7 @@ const Gi = () => i`<dialog class="ml-dialog">
 		<div class="ml-dialog-footer">
 			<slot name="dialog-footer"></slot>
 		</div>
-	</dialog> `, Ki = () => w`
+	</dialog> `, Hi = () => w`
 	:host {
 		/* Dialog panel */
 		--ml-dialog-max-width: 500px;
@@ -19961,7 +19981,7 @@ const Gi = () => i`<dialog class="ml-dialog">
 		}
 	}
 `;
-var Wi = class {
+var Gi = 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);
   }
@@ -20004,7 +20024,7 @@ var Wi = class {
     this._dialogs = /* @__PURE__ */ new Map();
   }
   addDialog(t, r) {
-    const a = new Wi(t, r);
+    const a = new Gi(t, r);
     return this._dialogs.set(t, {
       dialogRef: a,
       dialogComponent: void 0
@@ -20067,11 +20087,11 @@ var nr, Re = class {
 v([H(Z), V("design:type", typeof (nr = typeof Z < "u" && Z) == "function" ? nr : Object)], Re.prototype, "_dialogService", void 0);
 Re = v([_({
   selector: "ml-dialog",
-  template: Gi,
-  styles: Ki,
+  template: Bi,
+  styles: Hi,
   attributes: []
 })], Re);
-function Ui(e) {
+function Ki(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
@@ -20106,7 +20126,7 @@ function Ui(e) {
 		</dialog>
 	`;
 }
-const Yi = () => w`
+const Wi = () => w`
 	:host {
 		/* Backdrop */
 		--ml-drawer-backdrop-color: rgba(0, 0, 0, 0.5);
@@ -20374,15 +20394,15 @@ var dr = class {
 };
 dr = v([_({
   selector: "ml-drawer",
-  template: Ui,
-  styles: Yi,
+  template: Ki,
+  styles: Wi,
   attributes: [
     "side",
     "size",
     "show-close"
   ]
 })], dr);
-function Xi(e) {
+function Ui(e) {
   return i`
 		<div class="ml-dropdown">
 			<div class="ml-dropdown__trigger" @click=${e.toggle}>
@@ -20399,7 +20419,7 @@ function Xi(e) {
 		</div>
 	`;
 }
-const Ji = () => w`
+const Yi = () => w`
 	:host {
 		/* Menu */
 		--ml-dropdown-padding: var(--ml-space-1);
@@ -20669,15 +20689,15 @@ var cr = class {
 };
 cr = v([_({
   selector: "ml-dropdown",
-  template: Xi,
-  styles: Ji,
+  template: Ui,
+  styles: Yi,
   attributes: [
     "placement",
     "offset",
     "arrow"
   ]
 })], cr);
-function Qi(e) {
+function Xi(e) {
   return i`
 		<div
 			class=${g({
@@ -20697,7 +20717,7 @@ function Qi(e) {
 		</div>
 	`;
 }
-const Zi = () => w`
+const Ji = () => w`
 	:host {
 		/* Item base */
 		--ml-dropdown-item-gap: var(--ml-space-2);
@@ -20804,8 +20824,8 @@ var mr = class {
 };
 mr = v([_({
   selector: "ml-dropdown-item",
-  template: Qi,
-  styles: Zi,
+  template: Xi,
+  styles: Ji,
   attributes: [
     "value",
     "icon",
@@ -20814,10 +20834,10 @@ mr = v([_({
     "destructive"
   ]
 })], mr);
-function es() {
+function Qi() {
   return i`<div class="ml-dropdown-separator" role="separator"></div>`;
 }
-const ts = () => w`
+const Zi = () => w`
 	:host {
 		display: block;
 	}
@@ -20832,10 +20852,10 @@ var pr = class {
 };
 pr = v([_({
   selector: "ml-dropdown-separator",
-  template: es,
-  styles: ts
+  template: Qi,
+  styles: Zi
 })], pr);
-function rs(e) {
+function es(e) {
   return i`
 		<div class="ml-dropdown-group" role="group">
 			${d(!!e.label, () => i`<div class="ml-dropdown-group__label">${e.label}</div>`)}
@@ -20843,7 +20863,7 @@ function rs(e) {
 		</div>
 	`;
 }
-const as = () => w`
+const ts = () => w`
 	:host {
 		display: block;
 	}
@@ -20865,11 +20885,11 @@ var hr = class {
 };
 hr = v([_({
   selector: "ml-dropdown-group",
-  template: rs,
-  styles: as,
+  template: es,
+  styles: ts,
   attributes: ["label"]
 })], hr);
-function ls(e) {
+function rs(e) {
   return i`
 		<div class="ml-tooltip">
 			<div
@@ -20895,7 +20915,7 @@ function ls(e) {
 		</div>
 	`;
 }
-const os = () => w`
+const as = () => w`
 	:host {
 		/* Tooltip content */
 		--ml-tooltip-max-width: 320px;
@@ -21012,15 +21032,15 @@ var ur = class {
 };
 ur = v([_({
   selector: "ml-tooltip",
-  template: ls,
-  styles: os,
+  template: rs,
+  styles: as,
   attributes: [
     "content",
     "placement",
     "delay"
   ]
 })], ur);
-function is(e) {
+function ls(e) {
   return i`
 		<div class="ml-popover">
 			<div class="ml-popover__trigger" @click=${e.toggle}>
@@ -21036,7 +21056,7 @@ function is(e) {
 		</div>
 	`;
 }
-const ss = () => w`
+const os = () => w`
 	:host {
 		/* Content panel */
 		--ml-popover-padding-y: var(--ml-space-3);
@@ -21195,8 +21215,8 @@ var gr = class {
 };
 gr = v([_({
   selector: "ml-popover",
-  template: is,
-  styles: ss,
+  template: ls,
+  styles: os,
   attributes: [
     "placement",
     "offset",
@@ -21204,7 +21224,7 @@ gr = v([_({
     "arrow"
   ]
 })], gr);
-function ns(e) {
+function is(e) {
   const t = e["sidebar-position"] === "right", r = e["sidebar-collapsed"], a = e["header-fixed"], l = e.mobileOpen, o = e.mobile;
   return i`
 		<div
@@ -21259,7 +21279,7 @@ function ns(e) {
 		</div>
 	`;
 }
-const ds = () => w`
+const ss = () => w`
 	:host {
 		display: block;
 		height: 100%;
@@ -21498,15 +21518,15 @@ var vr = class {
 };
 vr = v([_({
   selector: "ml-app-shell",
-  template: ns,
-  styles: ds,
+  template: is,
+  styles: ss,
   attributes: [
     "sidebar-position",
     "sidebar-collapsed",
     "header-fixed"
   ]
 })], vr);
-function cs(e) {
+function ns(e) {
   const t = e.variant === "split" || e.variant === "split-reverse";
   return i`
 		<section
@@ -21567,7 +21587,7 @@ function cs(e) {
 		</section>
 	`;
 }
-const ms = () => w`
+const ds = () => w`
 	:host {
 		display: block;
 		width: 100%;
@@ -21896,8 +21916,8 @@ var br = class {
 };
 br = v([_({
   selector: "ml-hero-section",
-  template: cs,
-  styles: ms,
+  template: ns,
+  styles: ds,
   attributes: [
     "variant",
     "size",
@@ -21906,7 +21926,7 @@ br = v([_({
     "description"
   ]
 })], br);
-function ps(e) {
+function cs(e) {
   const t = !!(e.title || e.hasTitleSlot), r = !!(e.description || e.hasDescriptionSlot);
   return i`
 		<header
@@ -21958,7 +21978,7 @@ function ps(e) {
 		</header>
 	`;
 }
-const hs = () => w`
+const ms = () => w`
 	:host {
 		display: block;
 
@@ -22190,8 +22210,8 @@ var fr = class {
 };
 fr = v([_({
   selector: "ml-page-header",
-  template: ps,
-  styles: hs,
+  template: cs,
+  styles: ms,
   attributes: [
     "variant",
     "divider",
@@ -22199,7 +22219,7 @@ fr = v([_({
     "description"
   ]
 })], fr);
-function us(e) {
+function ps(e) {
   const t = e.variant === "split", r = i`
 		<div class="ml-auth__logo">
 			<slot name="logo"></slot>
@@ -22477,7 +22497,7 @@ const Kr = `
 			padding: var(--ml-auth-mobile-padding);
 		}
 	}
-`, gs = () => w`
+`, hs = () => w`
 	${Kr}
 `;
 var _r = class {
@@ -22495,15 +22515,15 @@ var _r = class {
 };
 _r = v([_({
   selector: "ml-login-page",
-  template: us,
-  styles: gs,
+  template: ps,
+  styles: hs,
   attributes: [
     "variant",
     "title",
     "description"
   ]
 })], _r);
-function vs(e) {
+function us(e) {
   const t = e.variant === "split", r = i`
 		<div class="ml-auth__logo">
 			<slot name="logo"></slot>
@@ -22557,7 +22577,7 @@ function vs(e) {
 		</div>
 	`;
 }
-const bs = () => w`
+const gs = () => w`
 	${Kr}
 `;
 var wr = class {
@@ -22575,15 +22595,15 @@ var wr = class {
 };
 wr = v([_({
   selector: "ml-signup-page",
-  template: vs,
-  styles: bs,
+  template: us,
+  styles: gs,
   attributes: [
     "variant",
     "title",
     "description"
   ]
 })], wr);
-function fs(e) {
+function vs(e) {
   const t = e.layout === "default" && e.hasAside;
   return i`
 		<ml-app-shell>
@@ -22626,7 +22646,7 @@ function fs(e) {
 		</ml-app-shell>
 	`;
 }
-const _s = () => w`
+const bs = () => w`
 	:host {
 		display: block;
 		height: 100%;
@@ -22760,8 +22780,8 @@ var yr = class {
 };
 yr = v([_({
   selector: "ml-dashboard-page",
-  template: fs,
-  styles: _s,
+  template: vs,
+  styles: bs,
   attributes: [
     "title",
     "description",
@@ -22789,14 +22809,14 @@ export {
   St as CardComponent,
   ct as CheckboxComponent,
   Zr as ComponentBase,
-  Fs as ComponentStateBaseService,
+  qs as ComponentStateBaseService,
   Tt as ContainerComponent,
   yr as DashboardPageComponent,
   yt as DatePickerComponent,
   Re as DialogComponent,
-  Wi as DialogRef,
+  Gi as DialogRef,
   Z as DialogService,
-  Ks as Directive,
+  Hs as Directive,
   Et as DividerComponent,
   dr as DrawerComponent,
   cr as DropdownComponent,
@@ -22811,10 +22831,10 @@ export {
   Ra as FormGroup,
   br as HeroSectionComponent,
   De as HttpBaseError,
-  je as HttpClient,
-  Be as HttpError,
+  Be as HttpClient,
+  je as HttpError,
   Ut as IconComponent,
-  ws as Inject,
+  fs as Inject,
   ee as Injectable,
   Wr as InjectionEngine,
   N as Injector,
@@ -22837,7 +22857,7 @@ export {
   ht as RadioCardGroupComponent,
   mt as RadioComponent,
   pt as RadioGroupComponent,
-  Es as RouteContextEvent,
+  zs as RouteContextEvent,
   ye as RouteContextService,
   _e as RouteMatcher,
   ke as RouterLinkComponent,
@@ -22870,79 +22890,79 @@ export {
   kt as ToastService,
   gt as ToggleComponent,
   ur as TooltipComponent,
-  Ys as Validators,
+  Ws as Validators,
   Vr as VirtualScroller,
-  Co as activityFeedItemStyles,
-  $o as activityFeedItemTemplate,
-  ko as activityFeedStyles,
-  xo as activityFeedTemplate,
+  ko as activityFeedItemStyles,
+  xo as activityFeedItemTemplate,
+  yo as activityFeedStyles,
+  wo as activityFeedTemplate,
   Fa as allTokens,
-  hn as announce,
-  ds as appShellStyles,
-  ns as appShellTemplate,
+  mn as announce,
+  ss as appShellStyles,
+  is as appShellTemplate,
   Xr as applyGlobalStyles,
   Ga as applyTheme,
   Lr as arrow,
   Pe as autoUpdate,
-  tn as baseThemeCss,
-  ys as bootstrap,
+  Zs as baseThemeCss,
+  _s as bootstrap,
   Na as borderTokens,
-  fi as breadcrumbItemStyles,
-  bi as breadcrumbItemTemplate,
-  vi as breadcrumbStyles,
-  gi as breadcrumbTemplate,
+  vi as breadcrumbItemStyles,
+  gi as breadcrumbItemTemplate,
+  ui as breadcrumbStyles,
+  hi as breadcrumbTemplate,
   Va as breakpointTokens,
-  Qs as breakpoints,
+  Xs as breakpoints,
   na as buildPathFromRoute,
-  li as calendarViewStyles,
-  ai as calendarViewTemplate,
+  ri as calendarViewStyles,
+  ti as calendarViewTemplate,
   g as classMap,
-  fn as clickOutside,
+  vn as clickOutside,
   Pa as colorTokens,
-  bn as componentBaseStyles,
+  gn as componentBaseStyles,
   re as computePosition,
   T as computed,
-  no as containerStyles,
-  so as containerTemplate,
-  Ls as createAction,
-  Js as createAsyncValidator,
-  sn as createBrandTheme,
-  zs as createDeactivateGuard,
+  io as containerStyles,
+  oo as containerTemplate,
+  Ms as createAction,
+  Ys as createAsyncValidator,
+  ln as createBrandTheme,
+  $s as createDeactivateGuard,
   Qa as createFocusTrap,
-  Ws as createFormControl,
-  Us as createFormGroup,
-  Cs as createGuard,
-  un as createLiveRegion,
-  Ns as createReducer,
-  Ss as createResolver,
-  qs as createState,
+  Gs as createFormControl,
+  Ks as createFormGroup,
+  ks as createGuard,
+  pn as createLiveRegion,
+  Os as createReducer,
+  Cs as createResolver,
+  Ls as createState,
   Or as createTheme,
   te as createToken,
-  Xs as createValidator,
+  Us as createValidator,
   w as css,
   et as darkTheme,
-  en as darkThemeCss,
-  _s as dashboardPageStyles,
-  fs as dashboardPageTemplate,
-  xs as defineConfig,
+  Qs as darkThemeCss,
+  bs as dashboardPageStyles,
+  vs as dashboardPageTemplate,
+  ws as defineConfig,
   U as directive,
-  Yi as drawerStyles,
-  Ui as drawerTemplate,
-  as as dropdownGroupStyles,
-  rs as dropdownGroupTemplate,
-  Zi as dropdownItemStyles,
-  Qi as dropdownItemTemplate,
-  ts as dropdownSeparatorStyles,
-  es as dropdownSeparatorTemplate,
-  Ji as dropdownStyles,
-  Xi as dropdownTemplate,
+  Wi as drawerStyles,
+  Ki 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,
   ta as environment,
   sa as findRouteByName,
   le as flip,
-  nn as focusFirst,
-  dn as focusLast,
-  cn as focusTrap,
-  pn as focusVisible,
+  on as focusFirst,
+  sn as focusLast,
+  nn as focusTrap,
+  cn as focusVisible,
   Aa as formControlDirective,
   Ml as formFieldStyles,
   Pl as formFieldTemplate,
@@ -22952,92 +22972,92 @@ export {
   Nr as getFirstFocusable,
   Me as getFocusableElements,
   Ja as getLastFocusable,
-  Is as getRegisteredDirectives,
+  Ds as getRegisteredDirectives,
   Ha as getResolvedTheme,
-  rn as getTheme,
+  en as getTheme,
   O as getTokenKey,
-  Ds as hasAttributeDirective,
-  ms as heroSectionStyles,
-  cs as heroSectionTemplate,
+  Rs as hasAttributeDirective,
+  ds as heroSectionStyles,
+  ns as heroSectionTemplate,
   i as html,
-  on as injectTheme,
+  an as injectTheme,
   Y as isDirective,
-  mn as isFocusVisible,
+  dn as isFocusVisible,
   Ur as isSignal,
-  ja as lightTheme,
-  Zs as lightThemeCss,
-  yo as listItemStyles,
-  wo as listItemTemplate,
-  _o as listStyles,
-  fo as listTemplate,
-  gs as loginPageStyles,
-  us as loginPageTemplate,
+  Ba as lightTheme,
+  Js as lightThemeCss,
+  _o as listItemStyles,
+  fo as listItemTemplate,
+  bo as listStyles,
+  vo as listTemplate,
+  hs as loginPageStyles,
+  ps as loginPageTemplate,
   we as matchRouteTree,
   el as newID,
   ae as offset,
-  Vs as onAction,
-  an as onThemeChange,
-  hs as pageHeaderStyles,
-  ps as pageHeaderTemplate,
-  wi as paginationStyles,
-  _i as paginationTemplate,
+  Ns as onAction,
+  tn as onThemeChange,
+  ms as pageHeaderStyles,
+  cs as pageHeaderTemplate,
+  fi as paginationStyles,
+  bi as paginationTemplate,
   za as portalDirective,
   Ia as primitiveColors,
-  eo as progressStyles,
-  Zl as progressTemplate,
-  Os as props,
-  ks as provideConfig,
-  $s as provideHttp,
-  js as provideRX,
+  Ql as progressStyles,
+  Jl as progressTemplate,
+  Ps as props,
+  ys as provideConfig,
+  xs as provideHttp,
+  Fs as provideRX,
   he as registerAttributeDirective,
   Ne as render,
   $ as repeat,
-  Hs as repeatRaw,
-  gn as resetStyles,
+  js as repeatRaw,
+  hn as resetStyles,
   ua as routerLinkDirective,
   Dl as selectStyles,
   Sl as selectTemplate,
   Ye as setActiveEffect,
   La as shadowTokens,
   oe as shift,
-  Ci as sidebarGroupStyles,
-  $i as sidebarGroupTemplate,
-  Si as sidebarItemStyles,
-  zi as sidebarItemTemplate,
-  ki as sidebarStyles,
-  yi as sidebarTemplate,
+  ki as sidebarGroupStyles,
+  xi as sidebarGroupTemplate,
+  Ci as sidebarItemStyles,
+  $i as sidebarItemTemplate,
+  yi as sidebarStyles,
+  _i as sidebarTemplate,
   M as signal,
-  bs as signupPageStyles,
-  vs as signupPageTemplate,
+  gs as signupPageStyles,
+  us as signupPageTemplate,
   Il as sliderStyles,
   Al as sliderTemplate,
   Ma as spacingTokens,
-  Hi as stepPanelStyles,
-  ji as stepPanelTemplate,
-  Bi as stepStyles,
-  Mi as stepTemplate,
-  Pi as stepsStyles,
-  Ei as stepsTemplate,
+  ji as stepPanelStyles,
+  Fi as stepPanelTemplate,
+  Vi as stepStyles,
+  Ii as stepTemplate,
+  Ai as stepsStyles,
+  zi as stepsTemplate,
   W as styleMap,
-  ui as tabPanelStyles,
-  hi as tabPanelTemplate,
-  pi as tabStyles,
-  mi as tabTemplate,
-  Ro as tableStyles,
-  Eo as tableTemplate,
-  ci as tabsStyles,
-  ni as tabsTemplate,
-  Yl as toastContainerStyles,
-  Ul as toastContainerTemplate,
-  Wl as toastStyles,
-  Kl as toastTemplate,
-  ln as toggleTheme,
-  Ba as tokensToCss,
+  pi as tabPanelStyles,
+  mi as tabPanelTemplate,
+  ci as tabStyles,
+  di as tabTemplate,
+  So as tableStyles,
+  zo as tableTemplate,
+  ni as tabsStyles,
+  ii as tabsTemplate,
+  Wl as toastContainerStyles,
+  Kl as toastContainerTemplate,
+  Gl as toastStyles,
+  Hl as toastTemplate,
+  rn as toggleTheme,
+  ja as tokensToCss,
   rl as tooltipDirective,
   qa as transitionTokens,
   Oa as typographyTokens,
-  As as unregisterAttributeDirective,
-  Gs as unsafeHTML,
-  vn as visuallyHiddenStyles,
+  Ts as unregisterAttributeDirective,
+  Bs as unsafeHTML,
+  un as visuallyHiddenStyles,
   d as when
 };