@juspay/svelte-ui-components 4.29.1 → 4.31.0

package/dist-wc/index.js

@@ -3560,6 +3560,295 @@ function create_custom_element(e, t, n, i, a, o) {
 	}), o && (s = o(s)), e.element = s, s;
 }
 //#endregion
+//#region src/lib/AnimatedNumber/motion.ts
+var WHEEL_LENGTH = 10, DELTA_PROPERTY = "--_animated-number-delta", wheelDelta = (e, t, n) => {
+	let i = e - t, a = n === 0 ? Math.sign(i) : n;
+	return a < 0 && e > t ? e - 10 - t : a > 0 && e < t ? 10 - t + e : i;
+}, digitRun = (e, t) => {
+	let n = "";
+	for (let i of e) {
+		let e = t(i);
+		e >= 0 && (n += String(e));
+	}
+	return n;
+}, unicodeDigitOf = (e) => {
+	let t = e.codePointAt(0);
+	if (!Number.isInteger(t) || !/\p{Nd}/u.test(e)) return -1;
+	let n = Number(t), i = n;
+	for (; n - i < 9 && /\p{Nd}/u.test(String.fromCodePoint(i - 1));) --i;
+	return n - i;
+}, trendBetween = (e, t, n = unicodeDigitOf) => {
+	if (typeof e == "number" && typeof t == "number") return Math.sign(t - e) || 0;
+	let i = digitRun(String(e), n), a = digitRun(String(t), n);
+	return i.length === a.length ? i < a ? 1 : i > a ? -1 : 0 : Math.sign(a.length - i.length);
+}, durationMs = (e) => {
+	let t = e.trim(), n = Number.parseFloat(t);
+	return Number.isFinite(n) ? t.endsWith("ms") ? n : t.endsWith("s") ? n * 1e3 : 0 : 0;
+}, registerDelta = () => {
+	try {
+		return CSS.registerProperty({
+			name: DELTA_PROPERTY,
+			syntax: "<number>",
+			inherits: !0,
+			initialValue: "0"
+		}), !0;
+	} catch (e) {
+		return e instanceof DOMException && e.name === "InvalidModificationError";
+	}
+}, supported = null, canSpin = () => {
+	if (supported !== null) return supported;
+	if (typeof CSS > "u" || typeof CSS.supports != "function") return supported = !1, supported;
+	let e = (() => {
+		try {
+			return document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" }), !0;
+		} catch {
+			return !1;
+		}
+	})();
+	return supported = CSS.supports("line-height", "mod(1,1)") && CSS.supports("line-height", "round(down,1,1)") && e && registerDelta(), supported;
+}, root$111 = /* @__PURE__ */ from_html("<span class=\"animated-number-digit-glyph svelte-1rbv9ao\"> </span>"), root_1$100 = /* @__PURE__ */ from_html("<span class=\"animated-number-digit svelte-1rbv9ao\"></span>"), root_2$77 = /* @__PURE__ */ from_html("<span class=\"animated-number-literal svelte-1rbv9ao\"> </span>"), root_3$65 = /* @__PURE__ */ from_html("<span><span class=\"animated-number-plain svelte-1rbv9ao\" aria-hidden=\"true\"> </span> <span class=\"animated-number-visual svelte-1rbv9ao\" aria-hidden=\"true\"></span></span>"), $$css$203 = {
+	hash: "svelte-1rbv9ao",
+	code: ".animated-number.svelte-1rbv9ao {\n    /*\n     * One box, shared by the columns, the static characters and the glyphs, and\n     * also the distance a step of one digit travels.\n     *\n     * Defined once and referred to as a LENGTH rather than each place computing\n     * its own, and rather than the glyphs positioning themselves in percentages\n     * of their own height. A percentage resolves against the element's used\n     * height, which WebKit rounds: measured at a 70.39px box, it parked a\n     * clamped glyph 70.0px away instead of 70.39px, leaving a 0.39px sliver of\n     * the wrong digit inside the window on every frame of every roll. It fell\n     * inside the fully transparent end of the mask so nothing showed, but it is\n     * the sort of near-miss that stops being invisible at another font size.\n     * Sharing one length makes the column and the glyph the same size by\n     * construction instead of by agreement. (The reference implementation meets\n     * the same rounding and rounds its mask height to whole pixels for it.)\n     */--_animated-number-box: calc(\n      var(--animated-number-row-height, 1.2em) + 2 * var(--animated-number-fade-height, 0.28em)\n    );position:relative;display:inline-block;white-space:nowrap;font-variant-numeric:var(--animated-number-font-variant-numeric, tabular-nums);color:var(--animated-number-color, inherit);}\n\n  /*\n   * The number renders as the text it replaced, even against a host stylesheet\n   * that styles bare elements.\n   *\n   * Every part of this component is a `<span>`: the root, the columns, the\n   * glyphs and the selection-copy node. A consumer carrying a bare `span` rule\n   * therefore hits all of them, and a type selector beats plain inheritance, so\n   * the number silently stopped matching its own label -- which is a text node\n   * in the parent and never affected.\n   *\n   * Measured rather than imagined: Lighthouse ships a bare `span` rule in\n   * static/style/text.css that sets colour, font-size and font-weight from its\n   * own tokens, and adopting the odometer there took every headline dashboard\n   * metric from 24px/600 to 12px/400 in the tertiary text colour, across nine\n   * routes. Nothing in this repo could have shown it: our own pages carry no\n   * such rule.\n   *\n   * Declared on the classes rather than left to inheritance so a bare type\n   * selector cannot win. `line-height` is deliberately NOT inherited -- the\n   * column box is this component's own geometry and is set below.\n   */.animated-number.svelte-1rbv9ao,\n  .animated-number-plain.svelte-1rbv9ao,\n  .animated-number-visual.svelte-1rbv9ao,\n  .animated-number-digit.svelte-1rbv9ao,\n  .animated-number-digit-glyph.svelte-1rbv9ao,\n  .animated-number-literal.svelte-1rbv9ao {font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;letter-spacing:inherit;}\n\n  /*\n   * Colour is deliberately NOT in the group above, and the root is deliberately\n   * not in this one.\n   *\n   * The root already resolves its colour through the token, and that\n   * declaration sits EARLIER in this stylesheet. A grouped rule that also\n   * matched `.animated-number` would set `color: inherit` at equal specificity\n   * and later source order, so the token lost every time and the root silently\n   * took the parent's colour instead -- which is indistinguishable from the\n   * token working, because the token's own fallback IS `inherit`. Only a caller\n   * that actually set `--animated-number-color` would have seen it ignored.\n   *\n   * The descendants still need the explicit declaration: a bare `span` selector\n   * in a host stylesheet outranks plain inheritance, which is the whole reason\n   * this block exists.\n   */.animated-number-plain.svelte-1rbv9ao,\n  .animated-number-visual.svelte-1rbv9ao,\n  .animated-number-digit.svelte-1rbv9ao,\n  .animated-number-digit-glyph.svelte-1rbv9ao,\n  .animated-number-literal.svelte-1rbv9ao {color:inherit;}.animated-number-visual.svelte-1rbv9ao {\n    /* Decorative glyph content, same treatment Avatar, KeyboardInput, Tabs,\n       Calendar and Draggable already give theirs. */user-select:none;}\n\n  /* Carries the real value for selection, copy and find-in-page. Clipped rather\n     than `display: none` or `visibility: hidden`, both of which would take it out\n     of the text layer and defeat the point. It sits inside the `role=\"img\"` root,\n     so assistive technology never reaches it -- the root's aria-label is the one\n     accessible name. */.animated-number-plain.svelte-1rbv9ao {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}\n\n  /*\n   * Both the digit columns and the static characters use ONE box height, so they\n   * sit on the same line however the fade is tuned: the text row plus a fade band\n   * above and below. The negative margin hands those two bands back to the line\n   * box, so the number still occupies exactly `--animated-number-row-height` in\n   * the surrounding text and adding a fade never shifts the baseline.\n   */\n  /*\n   * Both the digit columns and the static characters use ONE box height, so they\n   * sit on the same line however the fade is tuned: the text row plus a fade band\n   * above and below. The negative margin hands those two bands back to the line\n   * box, so the number still occupies exactly `--animated-number-row-height` in\n   * the surrounding text and adding a fade never shifts the baseline. One box is\n   * also exactly what a step of one digit travels, so a neighbour lands fully\n   * outside the column rather than poking into the fade band where the mask is\n   * still opaque.\n   */.animated-number-digit.svelte-1rbv9ao,\n  .animated-number-literal.svelte-1rbv9ao {display:inline-block;vertical-align:bottom;height:var(--_animated-number-box, 1.76em);line-height:var(--_animated-number-box, 1.76em);margin-block:calc(-1 * var(--animated-number-fade-height, 0.28em));}\n\n  /*\n   * `inline-block` above makes every column its own inline formatting context,\n   * and collapsible whitespace at the edges of one of those is dropped -- so a\n   * literal column holding exactly one space measured zero wide and \"12m 15s\"\n   * painted as \"12m15s\". `pre` is the narrowest fix that keeps the space: it\n   * changes nothing for a literal that is not whitespace, and a column is a\n   * single character, so there is no wrapping behaviour to lose.\n   *\n   * Digits are exempt because they are never whitespace and their column has\n   * its own width.\n   */.animated-number-literal.svelte-1rbv9ao {white-space:pre;}.animated-number-digit.svelte-1rbv9ao {position:relative;width:var(--animated-number-digit-width, 1ch);text-align:center;\n    /* The mask only fades what is inside this box; the clip is what removes the\n       glyphs parked outside it. Without it they sit in plain view above and below\n       the number. */overflow:hidden;-webkit-mask-image:linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--animated-number-fade-height, 0.28em),\n      #000 calc(100% - var(--animated-number-fade-height, 0.28em)),\n      transparent 100%\n    );mask-image:linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--animated-number-fade-height, 0.28em),\n      #000 calc(100% - var(--animated-number-fade-height, 0.28em)),\n      transparent 100%\n    );\n\n    /*\n     * The scalar every glyph below resolves its position from. A token stream,\n     * not a value: it is substituted into the `mod()` in the glyph rule, where\n     * `a + b` is an ordinary calc sum. The digit jumps to its new value and the\n     * delta animates from `-delta` back to 0, so the sum travels from the old\n     * digit to the new one and no glyph ever has its own position animated.\n     */--_animated-number-c: var(--_animated-number-digit, 0) + var(--_animated-number-delta, 0);\n\n    /*\n     * The two-token chain, resolved here and read back by the attachment rather\n     * than driving a `transition` -- which is why it still answers to\n     * `--motion-duration` and to the reduced-motion block at the end of this\n     * sheet, even though the motion is now one interpolated custom property.\n     */--_animated-number-spin-duration: var(\n      --animated-number-digit-transition-duration,\n      var(--motion-duration, 0.9s)\n    );--_animated-number-spin-easing: var(\n      --animated-number-digit-transition-easing,\n      var(\n        --motion-easing,\n        linear(\n          0,\n          0.005,\n          0.019,\n          0.039,\n          0.066,\n          0.096,\n          0.129,\n          0.165,\n          0.202,\n          0.24,\n          0.278,\n          0.316,\n          0.354,\n          0.39,\n          0.426,\n          0.461,\n          0.494,\n          0.526,\n          0.557,\n          0.586,\n          0.614,\n          0.64,\n          0.665,\n          0.689,\n          0.711,\n          0.731,\n          0.751,\n          0.769,\n          0.786,\n          0.802,\n          0.817,\n          0.831,\n          0.844,\n          0.856,\n          0.867,\n          0.877,\n          0.887,\n          0.896,\n          0.904,\n          0.912,\n          0.919,\n          0.925,\n          0.931,\n          0.937,\n          0.942,\n          0.947,\n          0.951,\n          0.955,\n          0.959,\n          0.962,\n          0.965,\n          0.968,\n          0.971,\n          0.973,\n          0.976,\n          0.978,\n          0.98,\n          0.981,\n          0.983,\n          0.984,\n          0.986,\n          0.987,\n          0.988,\n          0.989,\n          0.99,\n          0.991,\n          0.992,\n          0.992,\n          0.993,\n          0.994,\n          0.994,\n          0.995,\n          0.995,\n          0.996,\n          0.996,\n          0.9963,\n          0.9967,\n          0.9969,\n          0.9972,\n          0.9975,\n          0.9977,\n          0.9979,\n          0.9981,\n          0.9982,\n          0.9984,\n          0.9985,\n          0.9987,\n          0.9988,\n          0.9989,\n          1\n        )\n      )\n    );}\n\n  /*\n   * Where the wheel is actually drawn. `--_animated-number-offset-raw` is this\n   * glyph's distance ahead of the current position, 0-9; the `round(down, ...)`\n   * line re-centres that onto -5..5 so a glyph is placed on whichever side it is\n   * nearer, and the clamp parks everything further than one box away at exactly\n   * one box away. Nothing here is transitioned: it is recomputed every frame\n   * from a scalar that is, which is what keeps a far glyph pinned outside the\n   * window instead of tweening across it.\n   */.animated-number-digit-glyph.svelte-1rbv9ao {display:block;height:var(--_animated-number-box, 1.76em);line-height:var(--_animated-number-box, 1.76em);--_animated-number-offset-raw: mod(\n      10 + var(--_animated-number-glyph, 0) - mod(var(--_animated-number-c, 0), 10),\n      10\n    );--_animated-number-offset: calc(\n      var(--_animated-number-offset-raw, 0) - 10 *\n        round(down, var(--_animated-number-offset-raw, 0) / 5, 1)\n    );--_animated-number-y: clamp(\n      calc(-1 * var(--_animated-number-box, 1.76em)),\n      calc(var(--_animated-number-offset, 0) * var(--_animated-number-box, 1.76em)),\n      var(--_animated-number-box, 1.76em)\n    );transform:translateY(var(--_animated-number-y, 0));}\n\n  /* Only the current glyph stays in flow, so the column keeps one glyph's height\n     and never resizes mid-roll. */.animated-number-digit-glyph[inert].svelte-1rbv9ao {position:absolute;top:0;left:0;width:100%;}\n\n  /* At rest the column holds exactly the digit it reads as -- which is also what\n     stops the other nine reaching find-in-page. They come back for the roll. */.animated-number-digit.svelte-1rbv9ao:not(.animated-number-digit--spinning) .animated-number-digit-glyph[inert]:where(.svelte-1rbv9ao) {display:none;}\n\n  /* DESIGN_PRINCIPLES.md section 1 says only an animation with no natural end\n     needs its own reduced-motion block, because --motion-duration: 0s would\n     strand it on a keyframe meaning something else. This one is finite and has\n     no such hazard -- but the token only stops it if something assigns it, and\n     nothing in this library ever does: it exists as the middle rung of a\n     fallback chain for consumers to reach. Left at that, a reader who asked\n     their OS for reduced motion still watched every digit roll.\n\n     Collapsing the duration here rather than duplicating the query in script\n     keeps one mechanism for both routes: the attachment reads 0s and never\n     starts an animation, so the digit is simply already correct. It lives in\n     this component's own <style> because that is the only stylesheet reaching\n     inside the shadow root a custom-element consumer gets. */\n  @media (prefers-reduced-motion: reduce) {.animated-number-digit.svelte-1rbv9ao {--_animated-number-spin-duration: 0s;}\n  }"
+};
+function AnimatedNumber(e, t) {
+	push(t, !0), append_styles$1(e, $$css$203);
+	let n = prop(t, "value", 7), i = prop(t, "locale", 7, "en-US"), a = prop(t, "format", 7), o = prop(t, "live", 7, "off"), s = prop(t, "animateOnMount", 7, !1), c = prop(t, "ariaLabel", 7), l = prop(t, "testId", 7), u = prop(t, "classes", 7), f = [
+		"0",
+		"1",
+		"2",
+		"3",
+		"4",
+		"5",
+		"6",
+		"7",
+		"8",
+		"9"
+	], p = (e) => {
+		let t = e.reduce((e, t) => t.type === "integer" ? e + [...t.value].length : e, 0), n = e.reduce((e, t) => t.type === "group" ? e + 1 : e, 0), i = 0, a = 0, o = 0, s = {}, c = [];
+		for (let l of e) if (l.type === "integer") for (let e of l.value) c.push({
+			kind: "digit",
+			key: `int-${t - 1 - i}`,
+			digit: get(R)(e)
+		}), i += 1;
+		else if (l.type === "fraction") for (let e of l.value) c.push({
+			kind: "digit",
+			key: `frac-${a}`,
+			digit: get(R)(e)
+		}), a += 1;
+		else if (l.type === "group") c.push({
+			kind: "literal",
+			key: `group-${n - 1 - o}`,
+			text: l.value
+		}), o += 1;
+		else {
+			let e = s[l.type] ?? 0;
+			s[l.type] = e + 1, c.push({
+				kind: "literal",
+				key: `${l.type}-${e}`,
+				text: l.value
+			});
+		}
+		return c;
+	}, h = (e) => {
+		let t = [...e], n = -1, i = -1;
+		t.forEach((e, t) => {
+			get(R)(e) >= 0 && (n < 0 && (n = t), i = t);
+		});
+		let a = n >= 0, o = a ? t.slice(0, n) : t, s = a ? t.slice(n, i + 1) : [], c = a ? t.slice(i + 1) : [], l = [];
+		return o.forEach((e, t) => {
+			l.push({
+				kind: "literal",
+				key: `pre-${t}`,
+				text: e
+			});
+		}), s.forEach((e, t) => {
+			let n = `body-${s.length - 1 - t}`, i = get(R)(e);
+			l.push(i >= 0 ? {
+				kind: "digit",
+				key: n,
+				digit: i
+			} : {
+				kind: "literal",
+				key: n,
+				text: e
+			});
+		}), c.forEach((e, t) => {
+			l.push({
+				kind: "literal",
+				key: `post-${c.length - 1 - t}`,
+				text: e
+			});
+		}), l;
+	}, S = /* @__PURE__ */ user_derived(() => typeof n() == "number" && Object.is(n(), -0) ? 0 : n()), C = /* @__PURE__ */ user_derived(() => new Intl.NumberFormat(i(), a())), k = /* @__PURE__ */ user_derived(() => {
+		try {
+			let e = get(C).resolvedOptions().numberingSystem, t = new Intl.NumberFormat("en", {
+				numberingSystem: e,
+				useGrouping: !1
+			});
+			return Array.from({ length: 10 }, (e, n) => t.format(n));
+		} catch {
+			return f;
+		}
+	}), R = /* @__PURE__ */ user_derived(() => {
+		let e = new Map(get(k).map((e, t) => [e, t]));
+		return (t) => e.get(t) ?? -1;
+	}), te = /* @__PURE__ */ user_derived(() => typeof get(S) == "number" ? get(C).formatToParts(get(S)) : null), ne = /* @__PURE__ */ user_derived(() => get(te) === null ? String(get(S)) : get(te).map((e) => e.value).join("")), re = /* @__PURE__ */ state(!1);
+	onMount(() => {
+		set(re, !0);
+	});
+	let G = null, be = 0, Me = (e) => (G !== e && (be = G === null ? 0 : trendBetween(G, e, get(R)), G = e), be), Re = /* @__PURE__ */ new WeakMap(), Ue = /* @__PURE__ */ new WeakMap(), it = (e, t, n) => (i) => {
+		let a = Me(n), o = Re.has(i), s = Re.get(i) ?? 0;
+		if (Re.set(i, e), !t || !canSpin()) return;
+		let c = wheelDelta(e, o ? s : 0, a);
+		if (c === 0) return;
+		let l = getComputedStyle(i), u = durationMs(l.getPropertyValue("--_animated-number-spin-duration"));
+		if (u <= 0) return;
+		let f = l.getPropertyValue("--_animated-number-spin-easing").trim();
+		try {
+			i.animate({ [DELTA_PROPERTY]: [-c, 0] }, {
+				duration: u,
+				easing: f.length > 0 ? f : "linear",
+				composite: "accumulate"
+			});
+		} catch {
+			return;
+		}
+		let p = (Ue.get(i) ?? 0) + 1;
+		Ue.set(i, p), i.classList.add("animated-number-digit--spinning");
+		let h = () => {
+			Ue.get(i) === p && i.classList.remove("animated-number-digit--spinning");
+		};
+		Promise.all(i.getAnimations().map((e) => e.finished)).then(h, h);
+	}, at = /* @__PURE__ */ user_derived(() => get(te) === null ? h(String(get(S))) : p(get(te))), ot = /* @__PURE__ */ user_derived(() => c() ?? get(ne)), ct = /* @__PURE__ */ user_derived(() => get(ot).length > 0);
+	var lt = {
+		get value() {
+			return n();
+		},
+		set value(e) {
+			n(e), flushSync();
+		},
+		get locale() {
+			return i();
+		},
+		set locale(e = "en-US") {
+			i(e), flushSync();
+		},
+		get format() {
+			return a();
+		},
+		set format(e) {
+			a(e), flushSync();
+		},
+		get live() {
+			return o();
+		},
+		set live(e = "off") {
+			o(e), flushSync();
+		},
+		get animateOnMount() {
+			return s();
+		},
+		set animateOnMount(e = !1) {
+			s(e), flushSync();
+		},
+		get ariaLabel() {
+			return c();
+		},
+		set ariaLabel(e) {
+			c(e), flushSync();
+		},
+		get testId() {
+			return l();
+		},
+		set testId(e) {
+			l(e), flushSync();
+		},
+		get classes() {
+			return u();
+		},
+		set classes(e) {
+			u(e), flushSync();
+		}
+	}, ut = root_3$65(), dt = child(ut), ft = child(dt, !0);
+	reset(dt);
+	var pt = sibling(dt, 2);
+	return each(pt, 21, () => get(at), (e) => e.key, (e, t) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			var n = root_1$100();
+			each(n, 22, () => get(k), (e) => e, (e, n, i) => {
+				var a = root$111(), o = child(a, !0);
+				reset(a), template_effect(() => {
+					set_style(a, `--_animated-number-glyph: ${get(i) ?? ""};`), a.inert = get(i) !== get(t).digit, set_text(o, n);
+				}), append(e, a);
+			}), reset(n), attach(n, () => it(get(t).digit, get(re) || s(), get(S))), template_effect(() => set_style(n, `--_animated-number-digit: ${get(t).digit ?? ""};`)), append(e, n);
+		}, o = (e) => {
+			var n = root_2$77(), i = child(n, !0);
+			reset(n), template_effect(() => set_text(i, get(t).text)), append(e, n);
+		};
+		if_block(i, (e) => {
+			get(t).kind === "digit" ? e(a) : e(o, -1);
+		}), append(e, n);
+	}), reset(pt), reset(ut), template_effect(() => {
+		set_class(ut, 1, `animated-number ${u() ?? "" ?? ""}`, "svelte-1rbv9ao"), set_attribute(ut, "data-pw", l() ?? null), set_attribute(ut, "testid", l() ?? null), set_attribute(ut, "role", get(ct) ? "img" : null), set_attribute(ut, "aria-label", get(ct) ? get(ot) : null), set_attribute(ut, "aria-live", o() === "off" ? null : o()), set_text(ft, get(ne));
+	}), append(e, ut), pop(lt);
+}
+create_custom_element(AnimatedNumber, {
+	value: {},
+	locale: {},
+	format: {},
+	live: {},
+	animateOnMount: {},
+	ariaLabel: {},
+	testId: {},
+	classes: {}
+}, [], [], { mode: "open" });
+//#endregion
+//#region src/wc/components/AnimatedNumber.wc.svelte
+var rest_excludes$97 = new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"$$host",
+	"animatedNumberAriaLabel"
+]), $$css$202 = {
+	hash: "svelte-er2ct3",
+	code: "\n  /* A custom element defaults to `display: inline`, which has no definite\n     width for a percentage to resolve against -- so a component sizing itself\n     with `width: 100%` resolved against the wrong ancestor, and layout depended\n     on the consumer's surrounding markup rather than on the component. Per\n     DESIGN_PRINCIPLES.md section 2 the value matches this component's own root\n     element, and AnimatedNumber.svelte's root is a `<span>` -- inline-level,\n     not block -- so this is `inline-block`, not the `block` most wrappers here\n     use for a `<div>` root. It is a token so a consumer can change it without\n     reaching inside the shadow root -- which they could not do, since a\n     stylesheet cannot add a rule there. */:host {display:var(--sui-animated-number-display, inline-block);}"
+};
+function AnimatedNumber_wc(e, t) {
+	push(t, !0), append_styles$1(e, $$css$202);
+	let n = prop(t, "animatedNumberAriaLabel", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$97);
+	return AnimatedNumber(e, spread_props(() => i, { get ariaLabel() {
+		return n();
+	} })), pop({
+		get animatedNumberAriaLabel() {
+			return n();
+		},
+		set animatedNumberAriaLabel(e) {
+			n(e), flushSync();
+		}
+	});
+}
+customElements.define("sui-animated-number", create_custom_element(AnimatedNumber_wc, {
+	value: { type: "String" },
+	locale: { type: "String" },
+	format: { type: "Object" },
+	live: { type: "String" },
+	animatedNumberAriaLabel: {
+		attribute: "aria-label",
+		type: "String"
+	},
+	animateOnMount: {
+		attribute: "animate-on-mount",
+		reflect: !0,
+		type: "Boolean"
+	},
+	testId: {
+		attribute: "test-id",
+		type: "String"
+	},
+	classes: { type: "String" }
+}, [], [], { mode: "open" }));
+//#endregion
 //#region src/lib/Img/Img.svelte
 var root_1$99 = /* @__PURE__ */ from_svg("<svg></svg>"), root_2$76 = /* @__PURE__ */ from_html("<img/>"), $$css$201 = {
 	hash: "svelte-13ogpty",
@@ -3977,14 +4266,14 @@ customElements.define("sui-avatar", create_custom_element(Avatar_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Badge/Badge.svelte
-var root$109 = /* @__PURE__ */ from_html("<div> </div>"), root_1$97 = /* @__PURE__ */ from_html("<div><div class=\"badge-wrap svelte-17t9ly6\"><img class=\"icon-img svelte-17t9ly6\"/> <!></div></div>"), $$css$198 = {
+var root$109 = /* @__PURE__ */ from_html("<div><!></div>"), root_1$97 = /* @__PURE__ */ from_html("<div><div class=\"badge-wrap svelte-17t9ly6\"><img class=\"icon-img svelte-17t9ly6\"/> <!></div></div>"), $$css$198 = {
 	hash: "svelte-17t9ly6",
 	code: ".badge-wrap.svelte-17t9ly6 {position:relative;display:inline-block;margin:var(--badge-wrap-margin, 0px 12px 10px 0px);padding:var(--badge-wrap-padding, 8px 8px 8px 8px);}.badge.svelte-17t9ly6 {position:absolute;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:1;color:var(--badge-color, #fff);background-color:var(--badge-background, #727272);font-size:var(--badge-font-size, 12px);font-family:var(--badge-font-family, inherit);padding:var(--badge-padding, 3px 8px);border-radius:var(--badge-border-radius, 100px);min-width:var(--badge-min-width, 18px);min-height:var(--badge-min-height, 18px);border:var(--badge-border, 1px solid #fff);top:var(--badge-top, 0);right:var(--badge-right, 0);bottom:var(--badge-bottom);left:var(--badge-left);z-index:1;}.badge-dot.svelte-17t9ly6 {width:var(--badge-dot-size, 10px);height:var(--badge-dot-size, 10px);min-width:unset;min-height:unset;padding:0;}.badge-standalone.svelte-17t9ly6 {position:var(--badge-standalone-position, static);}.icon-img.svelte-17t9ly6 {border-radius:var(--badge-img-border-radius, var(--radius, 4px));width:var(--badge-img-width, 64px);height:var(--badge-img-height, 64px);object-fit:var(--badge-object-fit, contain);box-shadow:var(--badge-img-icon-shadow, 0 0 0 0.5px #798fa54d);background-color:var(--badge-img-background-color);}"
 };
 function Badge(e, t) {
 	push(t, !0), append_styles$1(e, $$css$198);
-	let n = prop(t, "image", 7), i = prop(t, "alt", 7, ""), a = prop(t, "value", 7), o = prop(t, "mode", 7, "count"), s = prop(t, "hidden", 7, !1), c = prop(t, "ariaLabel", 7), l = prop(t, "testId", 7), u = prop(t, "classes", 7), f = /* @__PURE__ */ user_derived(() => typeof n() == "string" && n().length > 0), p = /* @__PURE__ */ user_derived(() => !s()), h = /* @__PURE__ */ user_derived(() => o() === "dot"), S = /* @__PURE__ */ user_derived(() => get(h) ? "presentation" : "status"), C = /* @__PURE__ */ user_derived(() => get(h) ? null : c() ?? (typeof a() == "string" ? a() : null));
-	var k = {
+	let n = prop(t, "image", 7), i = prop(t, "alt", 7, ""), a = prop(t, "value", 7), o = prop(t, "mode", 7, "count"), s = prop(t, "hidden", 7, !1), c = prop(t, "ariaLabel", 7), l = prop(t, "testId", 7), u = prop(t, "classes", 7), f = prop(t, "animateValue", 7, !1), p = /* @__PURE__ */ user_derived(() => typeof n() == "string" && n().length > 0), h = /* @__PURE__ */ user_derived(() => !s()), S = /* @__PURE__ */ user_derived(() => o() === "dot"), C = /* @__PURE__ */ user_derived(() => get(S) ? "presentation" : "status"), k = /* @__PURE__ */ user_derived(() => get(S) ? null : c() ?? (typeof a() == "string" ? a() : null)), R = /* @__PURE__ */ user_derived(() => f() && !get(S));
+	var te = {
 		get image() {
 			return n();
 		},
@@ -4032,32 +4321,60 @@ function Badge(e, t) {
 		},
 		set classes(e) {
 			u(e), flushSync();
+		},
+		get animateValue() {
+			return f();
+		},
+		set animateValue(e = !1) {
+			f(e), flushSync();
 		}
-	}, R = comment(), te = first_child(R), ne = (e) => {
+	}, ne = comment(), re = first_child(ne), G = (e) => {
 		var t = root_1$97(), o = child(t), s = child(o), c = sibling(s, 2), f = (e) => {
 			var t = root$109();
 			let n;
-			var i = child(t, !0);
-			reset(t), template_effect(() => {
-				n = set_class(t, 1, "badge svelte-17t9ly6", null, n, { "badge-dot": get(h) }), set_text(i, get(h) ? "" : a() ?? "");
-			}), append(e, t);
+			var i = child(t), o = (e) => {
+				{
+					let t = /* @__PURE__ */ user_derived(() => a() ?? "");
+					AnimatedNumber(e, { get value() {
+						return get(t);
+					} });
+				}
+			}, s = (e) => {
+				var t = text();
+				template_effect(() => set_text(t, get(S) ? "" : a() ?? "")), append(e, t);
+			};
+			if_block(i, (e) => {
+				get(R) ? e(o) : e(s, -1);
+			}), reset(t), template_effect(() => n = set_class(t, 1, "badge svelte-17t9ly6", null, n, { "badge-dot": get(S) })), append(e, t);
 		};
 		if_block(c, (e) => {
-			get(p) && e(f);
+			get(h) && e(f);
 		}), reset(o), reset(t), template_effect(() => {
 			set_class(t, 1, `badge-icon ${u() ?? "" ?? ""}`, "svelte-17t9ly6"), set_attribute(t, "data-pw", typeof l() == "string" ? l() : null), set_attribute(t, "testid", typeof l() == "string" ? l() : null), set_attribute(s, "src", n()), set_attribute(s, "alt", i());
 		}), append(e, t);
-	}, re = (e) => {
+	}, be = (e) => {
 		var t = root$109();
 		let n;
-		var i = child(t, !0);
-		reset(t), template_effect(() => {
-			n = set_class(t, 1, `badge badge-standalone ${u() ?? "" ?? ""}`, "svelte-17t9ly6", n, { "badge-dot": get(h) }), set_attribute(t, "role", get(S)), set_attribute(t, "aria-label", get(C)), set_attribute(t, "data-pw", typeof l() == "string" ? l() : null), set_attribute(t, "testid", typeof l() == "string" ? l() : null), set_text(i, get(h) ? "" : a() ?? "");
+		var i = child(t), o = (e) => {
+			{
+				let t = /* @__PURE__ */ user_derived(() => a() ?? "");
+				AnimatedNumber(e, { get value() {
+					return get(t);
+				} });
+			}
+		}, s = (e) => {
+			var t = text();
+			template_effect(() => set_text(t, get(S) ? "" : a() ?? "")), append(e, t);
+		};
+		if_block(i, (e) => {
+			get(R) ? e(o) : e(s, -1);
+		}), reset(t), template_effect(() => {
+			n = set_class(t, 1, `badge badge-standalone ${u() ?? "" ?? ""}`, "svelte-17t9ly6", n, { "badge-dot": get(S) }), set_attribute(t, "role", get(C)), set_attribute(t, "aria-label", get(k)), set_attribute(t, "data-pw", typeof l() == "string" ? l() : null), set_attribute(t, "testid", typeof l() == "string" ? l() : null);
 		}), append(e, t);
 	};
-	return if_block(te, (e) => {
-		get(f) ? e(ne) : get(p) && e(re, 1);
-	}), append(e, R), pop(k);
+	return if_block(re, (e) => {
+		get(p) ? e(G) : get(h) && e(be, 1);
+	}), append(e, ne), pop(te);
 }
 create_custom_element(Badge, {
 	image: {},
@@ -4067,7 +4384,8 @@ create_custom_element(Badge, {
 	hidden: {},
 	ariaLabel: {},
 	testId: {},
-	classes: {}
+	classes: {},
+	animateValue: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Badge.wc.svelte
@@ -4138,7 +4456,12 @@ customElements.define("sui-badge", create_custom_element(Badge_wc, {
 		reflect: !0,
 		type: "String"
 	},
-	classes: { type: "String" }
+	classes: { type: "String" },
+	animateValue: {
+		attribute: "animate-value",
+		reflect: !0,
+		type: "Boolean"
+	}
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Breadcrumb/Breadcrumb.svelte
@@ -4704,7 +5027,7 @@ create_custom_element(Button, {
 //#region src/lib/Book/Book.svelte
 var root$104 = /* @__PURE__ */ from_html("<div><!></div>"), root_1$93 = /* @__PURE__ */ from_html("<div class=\"page svelte-1qrpci6\"><!></div>"), root_2$71 = /* @__PURE__ */ from_html("<div class=\"page page-slide svelte-1qrpci6\"><!></div>"), root_3$62 = /* @__PURE__ */ from_html("<button></button>"), root_4$50 = /* @__PURE__ */ from_html("<div class=\"page-indicator svelte-1qrpci6\"></div>"), root_5$40 = /* @__PURE__ */ from_html("<div role=\"region\" tabindex=\"0\"><div class=\"book-viewport svelte-1qrpci6\"><!> <div class=\"pages-container svelte-1qrpci6\"></div> <!></div> <!></div>"), $$css$192 = {
 	hash: "svelte-1qrpci6",
-	code: ".book.svelte-1qrpci6 {width:var(--book-width, 100%);background-color:var(--book-background, #ffffff);border-radius:var(--book-border-radius, var(--radius, 4px));border:var(--book-border, 1px solid #e0e0e0);outline:none;}.book-viewport.svelte-1qrpci6 {position:relative;display:flex;align-items:center;}.pages-container.svelte-1qrpci6 {position:relative;width:100%;height:var(--book-height, 400px);overflow:var(--book-overflow, hidden);}.page.svelte-1qrpci6 {width:100%;height:100%;}.page-slide.svelte-1qrpci6 {position:absolute;top:0;left:0;transition:transform var(--book-transition-duration, 0.3s) ease;}.page-fade.svelte-1qrpci6 {position:absolute;top:0;left:0;opacity:0;transition:opacity var(--book-transition-duration, 0.3s) ease;pointer-events:none;}.page-fade.page-active.svelte-1qrpci6 {opacity:1;pointer-events:auto;}.nav-button.svelte-1qrpci6 {display:flex;align-items:center;justify-content:center;--button-width: var(--book-nav-size, 36px);--button-height: var(--book-nav-size, 36px);--button-min-width: var(--book-nav-size, 36px);--button-background: var(--book-nav-background, rgba(0, 0, 0, 0.05));--button-border: none;--button-border-radius: var(--book-nav-border-radius, 50%);--button-padding: 0;--button-color: var(--book-nav-color, #333333);--button-hover-background: var(--book-nav-hover-background, rgba(0, 0, 0, 0.1));}.nav-disabled.svelte-1qrpci6 {opacity:var(--book-nav-disabled-opacity, 0.3);}.nav-button.svelte-1qrpci6 svg {width:18px;height:18px;}.nav-prev.svelte-1qrpci6 {margin-right:4px;}.nav-next.svelte-1qrpci6 {margin-left:4px;}.page-indicator.svelte-1qrpci6 {display:flex;justify-content:center;align-items:center;gap:var(--book-dot-gap, 8px);padding:var(--book-indicator-padding, 12px 0);}.dot.svelte-1qrpci6 {width:var(--book-dot-size, 8px);height:var(--book-dot-size, 8px);border-radius:var(--book-dot-border-radius, 50%);background-color:var(--book-dot-color, #cccccc);border:none;padding:0;cursor:pointer;transition:background-color var(--book-dot-transition-duration, var(--motion-duration, 0.2s))\n      var(--book-dot-transition-easing, var(--motion-easing, ease));}.dot-active.svelte-1qrpci6 {background-color:var(--book-dot-active-color, #333333);}\n\n  /* The page turn is a transform, which is the movement prefers-reduced-motion\n     exists for. Both ends of the transition are meaningful on their own -- a page\n     is either turned or not -- so removing it leaves no misleading frame, unlike\n     the timed loaders in Button and ListItem. This block lives in the component's\n     own <style> because that is the only stylesheet reaching inside the shadow\n     root a custom-element consumer gets. */\n  @media (prefers-reduced-motion: reduce) {.page.svelte-1qrpci6 {transition:none;}\n  }"
+	code: ".book.svelte-1qrpci6 {width:var(--book-width, 100%);background-color:var(--book-background, #ffffff);border-radius:var(--book-border-radius, var(--radius, 4px));border:var(--book-border, 1px solid #e0e0e0);outline:none;}\n\n  /* role=\"region\" tabindex=\"0\" above makes this a real Tab stop (arrow keys\n     then page it via handleKeyDown), so removing its outline unconditionally\n     left a keyboard user with no visible sign it was focused. :focus-visible\n     so tapping/clicking into the book to swipe doesn't show a ring. */.book.svelte-1qrpci6:focus-visible {outline:var(--book-focus-outline, 2px solid #2563eb);outline-offset:var(--book-focus-outline-offset, 2px);}.book-viewport.svelte-1qrpci6 {position:relative;display:flex;align-items:center;}.pages-container.svelte-1qrpci6 {position:relative;width:100%;height:var(--book-height, 400px);overflow:var(--book-overflow, hidden);}.page.svelte-1qrpci6 {width:100%;height:100%;}.page-slide.svelte-1qrpci6 {position:absolute;top:0;left:0;transition:transform var(--book-transition-duration, 0.3s) ease;}.page-fade.svelte-1qrpci6 {position:absolute;top:0;left:0;opacity:0;transition:opacity var(--book-transition-duration, 0.3s) ease;pointer-events:none;}.page-fade.page-active.svelte-1qrpci6 {opacity:1;pointer-events:auto;}.nav-button.svelte-1qrpci6 {display:flex;align-items:center;justify-content:center;--button-width: var(--book-nav-size, 36px);--button-height: var(--book-nav-size, 36px);--button-min-width: var(--book-nav-size, 36px);--button-background: var(--book-nav-background, rgba(0, 0, 0, 0.05));--button-border: none;--button-border-radius: var(--book-nav-border-radius, 50%);--button-padding: 0;--button-color: var(--book-nav-color, #333333);--button-hover-background: var(--book-nav-hover-background, rgba(0, 0, 0, 0.1));}.nav-disabled.svelte-1qrpci6 {opacity:var(--book-nav-disabled-opacity, 0.3);}.nav-button.svelte-1qrpci6 svg {width:18px;height:18px;}.nav-prev.svelte-1qrpci6 {margin-right:4px;}.nav-next.svelte-1qrpci6 {margin-left:4px;}.page-indicator.svelte-1qrpci6 {display:flex;justify-content:center;align-items:center;gap:var(--book-dot-gap, 8px);padding:var(--book-indicator-padding, 12px 0);}.dot.svelte-1qrpci6 {width:var(--book-dot-size, 8px);height:var(--book-dot-size, 8px);border-radius:var(--book-dot-border-radius, 50%);background-color:var(--book-dot-color, #cccccc);border:none;padding:0;cursor:pointer;transition:background-color var(--book-dot-transition-duration, var(--motion-duration, 0.2s))\n      var(--book-dot-transition-easing, var(--motion-easing, ease));}.dot-active.svelte-1qrpci6 {background-color:var(--book-dot-active-color, #333333);}\n\n  /* The page turn is a transform, which is the movement prefers-reduced-motion\n     exists for. Both ends of the transition are meaningful on their own -- a page\n     is either turned or not -- so removing it leaves no misleading frame, unlike\n     the timed loaders in Button and ListItem. This block lives in the component's\n     own <style> because that is the only stylesheet reaching inside the shadow\n     root a custom-element consumer gets. */\n  @media (prefers-reduced-motion: reduce) {.page.svelte-1qrpci6 {transition:none;}\n  }"
 };
 function Book(e, t) {
 	push(t, !0), append_styles$1(e, $$css$192);
@@ -5357,13 +5680,14 @@ function Calendar(e, t) {
 		let t = e.getTime();
 		return s() !== null && t < ut(s()).getTime() || c() !== null && t > ut(c()).getTime() ? !0 : typeof l() == "function" ? l()(e) : Array.isArray(l()) ? l().some((t) => ft(t, e)) : !1;
 	}
-	function mt(e) {
-		G.setMonth(G.getMonth() + e), set(be, null), R()?.({
+	let mt = /* @__PURE__ */ user_derived(() => s() !== null && new SvelteDate(G.getFullYear(), G.getMonth(), 0).getTime() < ut(s()).getTime()), ht = /* @__PURE__ */ user_derived(() => c() !== null && new SvelteDate(G.getFullYear(), G.getMonth() + 1, 1).getTime() > ut(c()).getTime());
+	function gt(e) {
+		e < 0 && get(mt) || e > 0 && get(ht) || (G.setMonth(G.getMonth() + e), set(be, null), R()?.({
 			year: G.getFullYear(),
 			month: G.getMonth()
-		});
+		}));
 	}
-	function ht(e) {
+	function _t(e) {
 		if (!pt(e)) if (set(be, e.getDate(), !0), o() === "single") n(e), C()?.({ date: e });
 		else if (i() === null || a() !== null) i(e), a(null);
 		else {
@@ -5374,23 +5698,23 @@ function Calendar(e, t) {
 			});
 		}
 	}
-	function gt(e, t, n) {
+	function vt(e, t, n) {
 		let i = new SvelteDate(e, t, n);
 		return i.setHours(0, 0, 0, 0), i;
 	}
-	let _t = 3660;
-	function vt(e, t) {
+	let yt = 3660;
+	function bt(e, t) {
 		let n = new SvelteDate(e);
 		for (let e = 0; e < 3660; e++) if (n.setDate(n.getDate() + t), n.setHours(0, 0, 0, 0), !pt(n)) return n;
 		return null;
 	}
-	function yt(e) {
+	function xt(e) {
 		(e.getFullYear() !== G.getFullYear() || e.getMonth() !== G.getMonth()) && (G.setFullYear(e.getFullYear(), e.getMonth(), 1), R()?.({
 			year: G.getFullYear(),
 			month: G.getMonth()
 		})), set(be, e.getDate(), !0), Re();
 	}
-	function bt(e) {
+	function St(e) {
 		let t = G.getFullYear(), n = G.getMonth();
 		switch (e.key) {
 			case "ArrowRight":
@@ -5398,17 +5722,17 @@ function Calendar(e, t) {
 			case "ArrowDown":
 			case "ArrowUp": {
 				if (e.preventDefault(), get(lt) === null) break;
-				let i = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : e.key === "ArrowDown" ? 7 : -7, a = vt(gt(t, n, get(lt)), i);
-				a !== null && yt(a);
+				let i = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : e.key === "ArrowDown" ? 7 : -7, a = bt(vt(t, n, get(lt)), i);
+				a !== null && xt(a);
 				break;
 			}
 			case "Enter":
 			case " ":
-				e.preventDefault(), get(lt) !== null && ht(gt(t, n, get(lt)));
+				e.preventDefault(), get(lt) !== null && _t(vt(t, n, get(lt)));
 				break;
 		}
 	}
-	var xt = {
+	var Ct = {
 		get value() {
 			return n();
 		},
@@ -5511,10 +5835,13 @@ function Calendar(e, t) {
 		set initialMonth(e = null) {
 			ne(e), flushSync();
 		}
-	}, St = root_3$61(), Ct = child(St), wt = child(Ct);
-	Button(child(wt), {
-		onclick: () => mt(-1),
+	}, wt = root_3$61(), Tt = child(wt), Et = child(Tt);
+	Button(child(Et), {
+		onclick: () => gt(-1),
 		ariaLabel: "Previous month",
+		get disabled() {
+			return get(mt);
+		},
 		children: (e, t) => {
 			var n = comment(), i = first_child(n), a = (e) => {
 				var t = comment();
@@ -5528,13 +5855,16 @@ function Calendar(e, t) {
 			}), append(e, n);
 		},
 		$$slots: { default: !0 }
-	}), reset(wt);
-	var Tt = sibling(wt, 2), Et = child(Tt, !0);
-	reset(Tt);
-	var Dt = sibling(Tt, 2);
-	Button(child(Dt), {
-		onclick: () => mt(1),
+	}), reset(Et);
+	var Dt = sibling(Et, 2), Ot = child(Dt, !0);
+	reset(Dt);
+	var kt = sibling(Dt, 2);
+	Button(child(kt), {
+		onclick: () => gt(1),
 		ariaLabel: "Next month",
+		get disabled() {
+			return get(ht);
+		},
 		children: (e, t) => {
 			var n = comment(), i = first_child(n), a = (e) => {
 				var t = comment();
@@ -5548,14 +5878,14 @@ function Calendar(e, t) {
 			}), append(e, n);
 		},
 		$$slots: { default: !0 }
-	}), reset(Dt), reset(Ct);
-	var Ot = sibling(Ct, 2);
-	each(Ot, 20, () => get(at), (e) => e, (e, t) => {
+	}), reset(kt), reset(Tt);
+	var At = sibling(Tt, 2);
+	each(At, 20, () => get(at), (e) => e, (e, t) => {
 		var n = root$102(), i = child(n, !0);
 		reset(n), template_effect(() => set_text(i, t)), append(e, n);
-	}), reset(Ot);
-	var kt = sibling(Ot, 2);
-	return each(kt, 21, () => get(ct), (e) => e.date.getTime(), (e, t) => {
+	}), reset(At);
+	var jt = sibling(At, 2);
+	return each(jt, 21, () => get(ct), (e) => e.date.getTime(), (e, t) => {
 		var n = comment(), i = first_child(n), a = (e) => {
 			var n = root_1$91();
 			let i;
@@ -5569,7 +5899,7 @@ function Calendar(e, t) {
 					"in-range": get(t).isInRange,
 					disabled: get(t).isDisabled
 				}), set_attribute(n, "data-day", get(t).day), n.disabled = get(t).isDisabled, set_attribute(n, "tabindex", get(lt) === get(t).day ? 0 : -1), set_attribute(n, "aria-label", e), set_text(a, get(t).day);
-			}, [() => get(t).date.toLocaleDateString(f())]), delegated("click", n, () => ht(get(t).date)), append(e, n);
+			}, [() => get(t).date.toLocaleDateString(f())]), delegated("click", n, () => _t(get(t).date)), append(e, n);
 		}, o = (e) => {
 			var n = root_2$70(), i = child(n, !0);
 			reset(n), template_effect(() => set_text(i, get(t).day)), append(e, n);
@@ -5577,9 +5907,9 @@ function Calendar(e, t) {
 		if_block(i, (e) => {
 			get(t).isCurrentMonth ? e(a) : e(o, -1);
 		}), append(e, n);
-	}), reset(kt), bind_this(kt, (e) => set(Me, e), () => get(Me)), reset(St), template_effect(() => {
-		set_class(St, 1, `calendar ${te() ?? "" ?? ""}`, "svelte-kboul8"), set_attribute(St, "data-pw", p()), set_attribute(St, "testid", p()), set_text(Et, get(ot)), set_attribute(kt, "tabindex", get(lt) === null ? 0 : -1);
-	}), delegated("keydown", kt, bt), append(e, St), pop(xt);
+	}), reset(jt), bind_this(jt, (e) => set(Me, e), () => get(Me)), reset(wt), template_effect(() => {
+		set_class(wt, 1, `calendar ${te() ?? "" ?? ""}`, "svelte-kboul8"), set_attribute(wt, "data-pw", p()), set_attribute(wt, "testid", p()), set_text(Ot, get(ot)), set_attribute(jt, "tabindex", get(lt) === null ? 0 : -1);
+	}), delegated("keydown", jt, St), append(e, wt), pop(Ct);
 }
 delegate(["keydown", "click"]), create_custom_element(Calendar, {
 	value: {},
@@ -5671,7 +6001,7 @@ customElements.define("sui-calendar", create_custom_element(Calendar_wc, {
 //#region src/lib/Carousel/Carousel.svelte
 var root$101 = /* @__PURE__ */ from_html("<div class=\"current-slide svelte-vk4ljo\"><!></div>"), root_1$90 = /* @__PURE__ */ from_html("<div class=\"carousel svelte-vk4ljo\"><div class=\"slidesDiv svelte-vk4ljo\"></div></div>"), root_2$69 = /* @__PURE__ */ from_html("<div role=\"button\" tabindex=\"0\"></div>"), root_3$60 = /* @__PURE__ */ from_html("<div class=\"dots-wrapper svelte-vk4ljo\"></div>"), root_4$49 = /* @__PURE__ */ from_html("<div><!> <!> <div class=\"carousel-live-region svelte-vk4ljo\" aria-live=\"polite\" aria-atomic=\"true\"><!></div></div>"), $$css$186 = {
 	hash: "svelte-vk4ljo",
-	code: ".carousel-container.svelte-vk4ljo {width:var(--carousel-width);}.current-slide.svelte-vk4ljo {width:var(--carousel-width, 300px);height:var(--carousel-height, 100px);flex-shrink:0;}.carousel.svelte-vk4ljo {box-shadow:var(--carousel-shadow);height:var(--carousel-height, 100px);width:var(--carousel-width, 300px);overflow:hidden;border-radius:var(--carousel-border-radius, 0%);}.carousel.svelte-vk4ljo:active {cursor:grabbing;}.slidesDiv.svelte-vk4ljo {display:flex;transform:translateX(0);transition:transform var(--carousel-track-transition-duration, var(--motion-duration, 0.5s))\n      var(--carousel-track-transition-easing, var(--motion-easing, ease-in-out));}.dots-wrapper.svelte-vk4ljo {gap:var(--dot-gap, 10px);padding-top:var(--dot-padding-top, 10px);display:flex;justify-content:center;}.dot.svelte-vk4ljo {width:var(--dot-width, 5px);height:var(--dot-height, 5px);border-radius:50%;background:var(--carousel-dot-color, #c4c4c4);cursor:pointer;transition:all var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))\n      var(--carousel-dot-transition-easing, var(--motion-easing, ease));}.active-dot.svelte-vk4ljo {width:var(--dot-width, 5px);height:var(--dot-height, 5px);border-radius:50%;cursor:pointer;background:var(--carousel-dot-active-color, #000000);transition:all var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))\n      var(--carousel-dot-transition-easing, var(--motion-easing, ease));}.dot.svelte-vk4ljo:focus-visible,\n  .active-dot.svelte-vk4ljo:focus-visible {outline:var(--dot-focus-outline, 2px solid #000000);outline-offset:var(--dot-focus-outline-offset, 2px);}\n  /*\n  @media only screen and (max-width: 324px) {\n\n    .carousel-container {\n      width:270px;\n\n    }\n    .current-slide {\n    width: 270px;\n    }\n    .carousel {\n      width:270px;\n    }\n  }\n\n  @media only screen and (max-width: 269px) {\n    .carousel-container {\n      width:240px;\n    }\n    .current-slide {\n    width: 240px;\n    }\n    .carousel {\n      width:240px;\n    }\n\n  } */\n\n  /* Visually hidden but readable by assistive tech -- the standard clip pattern\n     rather than display:none, which would remove it from the a11y tree. */.carousel-live-region.svelte-vk4ljo {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}"
+	code: ".carousel-container.svelte-vk4ljo {width:var(--carousel-width);}.current-slide.svelte-vk4ljo {width:var(--carousel-width, 300px);height:var(--carousel-height, 100px);flex-shrink:0;}.carousel.svelte-vk4ljo {box-shadow:var(--carousel-shadow);height:var(--carousel-height, 100px);width:var(--carousel-width, 300px);overflow:hidden;border-radius:var(--carousel-border-radius, 0%);}.carousel.svelte-vk4ljo:active {cursor:grabbing;}.slidesDiv.svelte-vk4ljo {display:flex;transform:translateX(0);transition:transform var(--carousel-track-transition-duration, var(--motion-duration, 0.5s))\n      var(--carousel-track-transition-easing, var(--motion-easing, ease-in-out));}\n  /* The track slide is the component's motion. The dots below transition only\n     `background`, which is a colour change rather than movement, so they are\n     deliberately left alone -- silencing them would remove feedback the\n     preference never asked to remove. Finite, so dropping it lands the track on\n     the slide it was moving to. */\n  @media (prefers-reduced-motion: reduce) {.slidesDiv.svelte-vk4ljo {transition:none;}\n  }.dots-wrapper.svelte-vk4ljo {gap:var(--dot-gap, 10px);padding-top:var(--dot-padding-top, 10px);display:flex;justify-content:center;}.dot.svelte-vk4ljo {width:var(--dot-width, 5px);height:var(--dot-height, 5px);border-radius:50%;background:var(--carousel-dot-color, #c4c4c4);cursor:pointer;\n    /* Only background actually differs between .dot and .active-dot, so only\n       background is transitioned. `transition: all` used to catch `outline`\n       too, animating the keyboard focus ring in on every Tab. */transition:background var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))\n      var(--carousel-dot-transition-easing, var(--motion-easing, ease));}.active-dot.svelte-vk4ljo {width:var(--dot-width, 5px);height:var(--dot-height, 5px);border-radius:50%;cursor:pointer;background:var(--carousel-dot-active-color, #000000);\n    /* See .dot above: scoped to background so outline is never transitioned. */transition:background var(--carousel-dot-transition-duration, var(--motion-duration, 0.3s))\n      var(--carousel-dot-transition-easing, var(--motion-easing, ease));}.dot.svelte-vk4ljo:focus-visible,\n  .active-dot.svelte-vk4ljo:focus-visible {outline:var(--dot-focus-outline, 2px solid #000000);outline-offset:var(--dot-focus-outline-offset, 2px);}\n  /*\n  @media only screen and (max-width: 324px) {\n\n    .carousel-container {\n      width:270px;\n\n    }\n    .current-slide {\n    width: 270px;\n    }\n    .carousel {\n      width:270px;\n    }\n  }\n\n  @media only screen and (max-width: 269px) {\n    .carousel-container {\n      width:240px;\n    }\n    .current-slide {\n    width: 240px;\n    }\n    .carousel {\n      width:240px;\n    }\n\n  } */\n\n  /* Visually hidden but readable by assistive tech -- the standard clip pattern\n     rather than display:none, which would remove it from the a11y tree. */.carousel-live-region.svelte-vk4ljo {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}"
 };
 function Carousel(e, t) {
 	push(t, !0), append_styles$1(e, $$css$186);
@@ -6615,7 +6945,7 @@ function getActiveElement(e) {
 //#region src/lib/Input/Input.svelte
 var root$98 = /* @__PURE__ */ from_html("<textarea></textarea>"), root_1$87 = /* @__PURE__ */ from_html("<input/>"), root_2$67 = /* @__PURE__ */ from_html("<span class=\"input-mandatory-asterisk svelte-1h0c2oe\" aria-hidden=\"true\">*</span>"), root_3$58 = /* @__PURE__ */ from_html("<label class=\"label svelte-1h0c2oe\"> <!></label>"), root_4$47 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-left input-icon-button svelte-1h0c2oe\"><!></button>"), root_5$39 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-left svelte-1h0c2oe\"><!></span>"), root_6$33 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"input-icon input-icon-right input-icon-button svelte-1h0c2oe\"><!></button>"), root_7$30 = /* @__PURE__ */ from_html("<span class=\"input-icon input-icon-right svelte-1h0c2oe\"><!></span>"), root_8$24 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_9$20 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"error-message svelte-1h0c2oe\"> </div>"), root_10$17 = /* @__PURE__ */ from_html("<div class=\"info-message svelte-1h0c2oe\"> </div>"), root_11$15 = /* @__PURE__ */ from_html("<div> </div>"), root_12$14 = /* @__PURE__ */ from_html("<div><!> <!> <!> <!> <!></div>"), $$css$182 = {
 	hash: "svelte-1h0c2oe",
-	code: "textarea.svelte-1h0c2oe,\n  input.svelte-1h0c2oe {box-sizing:var(--input-box-sizing, border-box);height:var(--input-height, fit-content);\n\n    /* Both default to the CSS initial value, so a consumer that sets neither is\n       byte-identical to before. A textarea that grows with its content needs a\n       ceiling before it can scroll, and one used as a paste target needs a floor;\n       neither was reachable through the --input-* surface. */min-height:var(--input-min-height, auto);max-height:var(--input-max-height, none);background-color:var(--input-background, white);font-size:var(--input-font-size, 16px) !important;font-family:var(--input-font-family, inherit);border-radius:var(--input-radius, var(--radius, 4px));outline:none;padding:var(--input-padding, 16px);font-weight:var(--input-font-weight, 500);\n\n    /* `normal` is what a textarea/input computes today regardless of any inherited\n       value — the UA sheet sets it, and inheritance loses to a UA declaration on the\n       element itself. So the default here is byte-identical for existing consumers,\n       and this is the only way a consumer can set it at all. */line-height:var(--input-line-height, normal);width:var(--input-width, fit-content);margin:var(--input-margin, 0);appearance:none !important;-webkit-appearance:none !important; /* For Safari MWeb */box-shadow:var(--input-box-shadow, 0px 1px 8px #2f537733);border:var(--input-border, 1px solid transparent);resize:none;visibility:var(--input-visibility, visible);text-align:var(--input-text-align, left);text-transform:var(--input-text-transform, none);color:var(--input-text-color, #333333);}textarea.svelte-1h0c2oe:focus,\n  input.svelte-1h0c2oe:focus {border:var(--input-focus-border, 1px solid transparent);}.input-error.svelte-1h0c2oe {--input-focus-border: var(\n      --input-error-border,\n      1px solid var(--input-error-msg-text-color, #c5120a)\n    ) !important;--input-border: var(\n      --input-error-border,\n      1px solid var(--input-error-msg-text-color, #c5120a)\n    ) !important;}.action-input.svelte-1h0c2oe {border-radius:var(--input-radius, var(--radius, 4px) 0 0 var(--radius, 4px));box-shadow:var(--input-box-shadow, 0px 0px 0px #ffffff);margin-bottom:0;}.input-container.svelte-1h0c2oe {display:flex;flex-direction:column;margin:var(--input-container-margin, 0);padding:var(--input-container-padding, 0);width:var(--input-container-width, fit-content);}.label.svelte-1h0c2oe {font-weight:var(--input-label-msg-text-weight, 400);font-size:var(--input-label-msg-text-size, 12px);color:var(--input-label-msg-text-color, #4d6174);margin:var(--input-label-msg-margin, 0px 0px 6px 0px);padding:var(--input-label-msg-padding);}.input-mandatory-asterisk.svelte-1h0c2oe {color:var(--input-mandatory-color, var(--input-error-msg-text-color, #c5120a));margin-left:var(--input-mandatory-gap, 2px);}\n\n  /* Icon wrapper: only rendered when leftIcon/rightIcon is supplied, so non-icon\n     consumers keep the exact prior DOM. The field's bottom margin moves to the\n     wrap so the absolutely-positioned icons centre on the field, not the margin. */.input-field-wrap.svelte-1h0c2oe {position:relative;display:block;margin:var(--input-margin, 0);}.input-field-wrap.svelte-1h0c2oe > textarea,\n  .input-field-wrap.svelte-1h0c2oe > input {margin:0 !important;width:var(--input-width, 100%);}.input-icon.svelte-1h0c2oe {position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:var(--input-icon-size, 20px);height:var(--input-icon-size, 20px);color:var(--input-icon-color, inherit);pointer-events:none;}.input-icon-button.svelte-1h0c2oe {background:none;border:none;padding:0;cursor:pointer;pointer-events:auto;}.input-icon-button.svelte-1h0c2oe:focus-visible {outline:var(--input-icon-focus-outline, 2px solid var(--input-focus-border-color, #005fcc));outline-offset:var(--input-icon-focus-outline-offset, 2px);border-radius:var(--input-icon-focus-radius, var(--radius, 4px));}.input-icon-left.svelte-1h0c2oe {left:var(--input-icon-gap, 12px);color:var(--input-left-icon-color, var(--input-icon-color, inherit));}.input-icon-right.svelte-1h0c2oe {right:var(--input-icon-gap, 12px);}.input-field-wrap.has-left-icon.svelte-1h0c2oe > textarea,\n  .input-field-wrap.has-left-icon.svelte-1h0c2oe > input {padding-left:calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);}.input-field-wrap.has-right-icon.svelte-1h0c2oe > textarea,\n  .input-field-wrap.has-right-icon.svelte-1h0c2oe > input {padding-right:calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);}.error-message.svelte-1h0c2oe {font-weight:var(--input-error-msg-text-weight, 400);font-size:var(--input-error-msg-text-size, 12px);\n    /* #c5120a clears WCAG AA (6.06:1 on white) at this 12px size; the prior #fa1405\n       default was only 4.06:1, so the error message itself failed to be legible. */color:var(--input-error-msg-text-color, #c5120a);margin:var(--input-error-msg-margin);padding:var(--input-error-msg-padding);}.info-message.svelte-1h0c2oe {font-weight:var(--input-info-msg-text-weight, 400);font-size:var(--input-info-msg-text-size, 12px);\n    /* Neutral on purpose -- this used to default to the same red as .error-message,\n       so helper text with no error visually read as a failed field (color-alone\n       signalling, WCAG 1.4.1). #52525b is the muted-text tone already used for\n       ChatToolStatus/ThinkingIndicator elsewhere in this library, at 7.73:1. */color:var(--input-info-msg-text-color, #52525b);margin:var(--input-info-msg-margin);padding:var(--input-info-msg-padding);}.input-char-count.svelte-1h0c2oe {align-self:flex-end;font-size:var(--input-char-count-size, 12px);color:var(--input-char-count-color, #5c6b7a);margin:var(--input-char-count-margin, 4px 0 0);font-variant-numeric:tabular-nums;}.input-char-count.at-limit.svelte-1h0c2oe {color:var(--input-char-count-limit-color, var(--input-error-msg-text-color, #c5120a));}.svelte-1h0c2oe::placeholder {color:var(--input-placeholder-color, #5c6b7a);}"
+	code: "textarea.svelte-1h0c2oe,\n  input.svelte-1h0c2oe {box-sizing:var(--input-box-sizing, border-box);height:var(--input-height, fit-content);\n\n    /* Both default to the CSS initial value, so a consumer that sets neither is\n       byte-identical to before. A textarea that grows with its content needs a\n       ceiling before it can scroll, and one used as a paste target needs a floor;\n       neither was reachable through the --input-* surface. */min-height:var(--input-min-height, auto);max-height:var(--input-max-height, none);background-color:var(--input-background, white);font-size:var(--input-font-size, 16px) !important;font-family:var(--input-font-family, inherit);border-radius:var(--input-radius, var(--radius, 4px));outline:none;padding:var(--input-padding, 16px);font-weight:var(--input-font-weight, 500);\n\n    /* `normal` is what a textarea/input computes today regardless of any inherited\n       value — the UA sheet sets it, and inheritance loses to a UA declaration on the\n       element itself. So the default here is byte-identical for existing consumers,\n       and this is the only way a consumer can set it at all. */line-height:var(--input-line-height, normal);width:var(--input-width, fit-content);margin:var(--input-margin, 0);appearance:none !important;-webkit-appearance:none !important; /* For Safari MWeb */box-shadow:var(--input-box-shadow, 0px 1px 8px #2f537733);border:var(--input-border, 1px solid transparent);resize:none;visibility:var(--input-visibility, visible);text-align:var(--input-text-align, left);text-transform:var(--input-text-transform, none);color:var(--input-text-color, #333333);}\n\n  /* The fallback used to be `1px solid transparent` -- a border that changes\n     width/style but not colour, so a mouse-focused OR keyboard-focused field\n     looked identical to unfocused. Text inputs use a real :focus (not\n     :focus-visible): unlike a button-shaped control, a text field's focus\n     ring has to stay visible regardless of input modality, since a mouse\n     click into a field is itself the start of a keyboard interaction.\n     --input-focus-border-color already exists for exactly this colour (see\n     .input-icon-button:focus-visible below), so this reuses it instead of\n     minting a second token for the same ring. */textarea.svelte-1h0c2oe:focus,\n  input.svelte-1h0c2oe:focus {border:var(--input-focus-border, 1px solid var(--input-focus-border-color, #005fcc));}.input-error.svelte-1h0c2oe {--input-focus-border: var(\n      --input-error-border,\n      1px solid var(--input-error-msg-text-color, #c5120a)\n    ) !important;--input-border: var(\n      --input-error-border,\n      1px solid var(--input-error-msg-text-color, #c5120a)\n    ) !important;}.action-input.svelte-1h0c2oe {border-radius:var(--input-radius, var(--radius, 4px) 0 0 var(--radius, 4px));box-shadow:var(--input-box-shadow, 0px 0px 0px #ffffff);margin-bottom:0;}.input-container.svelte-1h0c2oe {display:flex;flex-direction:column;margin:var(--input-container-margin, 0);padding:var(--input-container-padding, 0);width:var(--input-container-width, fit-content);}.label.svelte-1h0c2oe {font-weight:var(--input-label-msg-text-weight, 400);font-size:var(--input-label-msg-text-size, 12px);color:var(--input-label-msg-text-color, #4d6174);margin:var(--input-label-msg-margin, 0px 0px 6px 0px);padding:var(--input-label-msg-padding);}.input-mandatory-asterisk.svelte-1h0c2oe {color:var(--input-mandatory-color, var(--input-error-msg-text-color, #c5120a));margin-left:var(--input-mandatory-gap, 2px);}\n\n  /* Icon wrapper: only rendered when leftIcon/rightIcon is supplied, so non-icon\n     consumers keep the exact prior DOM. The field's bottom margin moves to the\n     wrap so the absolutely-positioned icons centre on the field, not the margin. */.input-field-wrap.svelte-1h0c2oe {position:relative;display:block;margin:var(--input-margin, 0);}.input-field-wrap.svelte-1h0c2oe > textarea,\n  .input-field-wrap.svelte-1h0c2oe > input {margin:0 !important;width:var(--input-width, 100%);}.input-icon.svelte-1h0c2oe {position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:var(--input-icon-size, 20px);height:var(--input-icon-size, 20px);color:var(--input-icon-color, inherit);pointer-events:none;}.input-icon-button.svelte-1h0c2oe {background:none;border:none;padding:0;cursor:pointer;pointer-events:auto;}.input-icon-button.svelte-1h0c2oe:focus-visible {outline:var(--input-icon-focus-outline, 2px solid var(--input-focus-border-color, #005fcc));outline-offset:var(--input-icon-focus-outline-offset, 2px);border-radius:var(--input-icon-focus-radius, var(--radius, 4px));}.input-icon-left.svelte-1h0c2oe {left:var(--input-icon-gap, 12px);color:var(--input-left-icon-color, var(--input-icon-color, inherit));}.input-icon-right.svelte-1h0c2oe {right:var(--input-icon-gap, 12px);}.input-field-wrap.has-left-icon.svelte-1h0c2oe > textarea,\n  .input-field-wrap.has-left-icon.svelte-1h0c2oe > input {padding-left:calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);}.input-field-wrap.has-right-icon.svelte-1h0c2oe > textarea,\n  .input-field-wrap.has-right-icon.svelte-1h0c2oe > input {padding-right:calc(var(--input-icon-size, 20px) + var(--input-icon-gap, 12px) * 2);}.error-message.svelte-1h0c2oe {font-weight:var(--input-error-msg-text-weight, 400);font-size:var(--input-error-msg-text-size, 12px);\n    /* #c5120a clears WCAG AA (6.06:1 on white) at this 12px size; the prior #fa1405\n       default was only 4.06:1, so the error message itself failed to be legible. */color:var(--input-error-msg-text-color, #c5120a);margin:var(--input-error-msg-margin);padding:var(--input-error-msg-padding);}.info-message.svelte-1h0c2oe {font-weight:var(--input-info-msg-text-weight, 400);font-size:var(--input-info-msg-text-size, 12px);\n    /* Neutral on purpose -- this used to default to the same red as .error-message,\n       so helper text with no error visually read as a failed field (color-alone\n       signalling, WCAG 1.4.1). #52525b is the muted-text tone already used for\n       ChatToolStatus/ThinkingIndicator elsewhere in this library, at 7.73:1. */color:var(--input-info-msg-text-color, #52525b);margin:var(--input-info-msg-margin);padding:var(--input-info-msg-padding);}.input-char-count.svelte-1h0c2oe {align-self:flex-end;font-size:var(--input-char-count-size, 12px);color:var(--input-char-count-color, #5c6b7a);margin:var(--input-char-count-margin, 4px 0 0);font-variant-numeric:tabular-nums;}.input-char-count.at-limit.svelte-1h0c2oe {color:var(--input-char-count-limit-color, var(--input-error-msg-text-color, #c5120a));}.svelte-1h0c2oe::placeholder {color:var(--input-placeholder-color, #5c6b7a);}"
 };
 function Input(e, t) {
 	let n = props_id();
@@ -6648,8 +6978,12 @@ function Input(e, t) {
 	user_effect(() => {
 		mt()(get(en));
 	});
-	let tn = /* @__PURE__ */ user_derived(() => get(en) === "Invalid"), nn = /* @__PURE__ */ user_derived(() => get(tn) || Mt()), rn = /* @__PURE__ */ user_derived(() => `${get(Ht)}-error`), an = /* @__PURE__ */ user_derived(() => c() != null && c() !== "" && get(nn) && !G()), on = /* @__PURE__ */ user_derived(() => `${get(Ht)}-info`), sn = /* @__PURE__ */ user_derived(() => l() !== "" && !G()), cn = /* @__PURE__ */ user_derived(() => [get(an) ? get(rn) : null, get(sn) ? get(on) : null].filter(Boolean).join(" ")), ln = /* @__PURE__ */ user_derived(() => typeof wt() == "function"), un = /* @__PURE__ */ user_derived(() => typeof Tt() == "function"), dn = /* @__PURE__ */ user_derived(() => i()?.length ?? 0), fn = /* @__PURE__ */ user_derived(() => R() ?? 1e3), pn = /* @__PURE__ */ user_derived(() => Pt() ? "none" : Rt());
-	function mn() {
+	let tn = /* @__PURE__ */ user_derived(() => get(en) === "Invalid"), nn = /* @__PURE__ */ user_derived(() => get(tn) || Mt()), rn = /* @__PURE__ */ user_derived(() => get(nn) && !G()), an = /* @__PURE__ */ user_derived(() => describeField(get(Ht), {
+		error: get(rn) && c() != null && c() !== "" ? c() : null,
+		info: !G() && l() !== "" ? l() : null,
+		invalid: get(rn)
+	})), on = /* @__PURE__ */ user_derived(() => typeof wt() == "function"), sn = /* @__PURE__ */ user_derived(() => typeof Tt() == "function"), cn = /* @__PURE__ */ user_derived(() => i()?.length ?? 0), ln = /* @__PURE__ */ user_derived(() => R() ?? 1e3), un = /* @__PURE__ */ user_derived(() => Pt() ? "none" : Rt());
+	function dn() {
 		let e = get($t);
 		if (!e || !be() || !Pt()) return;
 		e.style.height = "auto";
@@ -6657,9 +6991,9 @@ function Input(e, t) {
 		e.style.height = `${u}px`, e.style.overflowY = e.scrollHeight > l ? "auto" : "hidden";
 	}
 	user_effect(() => {
-		i(), be() && Pt() && mn();
+		i(), be() && Pt() && dn();
 	});
-	function hn(e) {
+	function fn(e) {
 		if (get($t) === null) return;
 		let t = get($t).value;
 		if (o() === "tel" && t.length > 0) {
@@ -6669,18 +7003,18 @@ function Input(e, t) {
 				get($t).value = i();
 				return;
 			}
-			if (e > get(fn)) {
-				if (i().length === get(fn)) {
-					get($t).value = _n(i());
+			if (e > get(ln)) {
+				if (i().length === get(ln)) {
+					get($t).value = mn(i());
 					return;
 				}
-				t = t.substring(e - get(fn));
+				t = t.substring(e - get(ln));
 			}
-			t = _n(t), get($t).value = t;
+			t = mn(t), get($t).value = t;
 		}
 		i(get($t).value), ft()?.(get($t).value, e);
 	}
-	function gn(e) {
+	function pn(e) {
 		if (get($t) !== null) {
 			if (o() !== "tel") {
 				pt()?.(e);
@@ -6690,17 +7024,17 @@ function Input(e, t) {
 				let t = e.clipboardData.getData("text");
 				t = ot().reduce((e, t) => t(e), t);
 				let n = t.replace(/\D+|\D/gm, ""), a = n.length;
-				n.length === 0 && e.preventDefault(), n.length > get(fn) && (i(_n(n.substring(a - get(fn)))), pt()?.(e), e.preventDefault());
+				n.length === 0 && e.preventDefault(), n.length > get(ln) && (i(mn(n.substring(a - get(ln)))), pt()?.(e), e.preventDefault());
 			}
 		}
 	}
-	function _n(e) {
+	function mn(e) {
 		return ct().reduce((e, t) => t(e), e);
 	}
-	function vn(e) {
+	function hn(e) {
 		get(en) === "InProgress" && i().length > 0 && set(en, "Invalid"), ut()?.(e), dt()?.(e);
 	}
-	var yn = {
+	var gn = {
 		focus: qt,
 		blur: Zt,
 		getInputRef: Qt,
@@ -7040,8 +7374,8 @@ function Input(e, t) {
 		set showCount(e = !1) {
 			zt(e), flushSync();
 		}
-	}, bn = root_12$14();
-	let xn;
+	}, _n = root_12$14();
+	let vn;
 	{
 		let e = (e) => {
 			var t = comment(), n = first_child(t), s = (e) => {
@@ -7049,10 +7383,10 @@ function Input(e, t) {
 				remove_textarea_child(t);
 				let n, s;
 				bind_this(t, (e) => set($t, e), () => get($t)), template_effect(() => {
-					set_attribute(t, "id", get(Ht)), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(Gt) ? null : yt() ?? null), set_attribute(t, "autocomplete", Me()), set_attribute(t, "inputmode", Re()), set_attribute(t, "name", Ue()), set_attribute(t, "role", vt()), set_attribute(t, "aria-expanded", bt()), set_attribute(t, "aria-autocomplete", xt()), set_attribute(t, "aria-controls", St()), set_attribute(t, "aria-activedescendant", Ct()), set_attribute(t, "aria-required", get(Bt) || null), set_attribute(t, "aria-invalid", get(nn) && !G() ? "true" : null), set_attribute(t, "aria-describedby", get(cn) || null), t.required = get(Bt) || null, set_attribute(t, "data-pw", at()), set_attribute(t, "testid", at()), n = set_style(t, `--focus-border: ${+!!k()}px;`, n, { resize: get(pn) }), set_attribute(t, "rows", Nt() ?? null), t.disabled = f(), t.readOnly = p() || null, set_attribute(t, "spellcheck", h()), set_attribute(t, "maxlength", o() === "tel" ? null : R()), set_attribute(t, "minlength", te()), s = set_class(t, 1, "svelte-1h0c2oe", null, s, { "action-input": G() });
+					set_attribute(t, "id", get(Ht)), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(Gt) ? null : yt() ?? null), set_attribute(t, "autocomplete", Me()), set_attribute(t, "inputmode", Re()), set_attribute(t, "name", Ue()), set_attribute(t, "role", vt()), set_attribute(t, "aria-expanded", bt()), set_attribute(t, "aria-autocomplete", xt()), set_attribute(t, "aria-controls", St()), set_attribute(t, "aria-activedescendant", Ct()), set_attribute(t, "aria-required", get(Bt) || null), set_attribute(t, "aria-invalid", get(an).ariaInvalid), set_attribute(t, "aria-describedby", get(an).describedBy), t.required = get(Bt) || null, set_attribute(t, "data-pw", at()), set_attribute(t, "testid", at()), n = set_style(t, `--focus-border: ${+!!k()}px;`, n, { resize: get(un) }), set_attribute(t, "rows", Nt() ?? null), t.disabled = f(), t.readOnly = p() || null, set_attribute(t, "spellcheck", h()), set_attribute(t, "maxlength", o() === "tel" ? null : R()), set_attribute(t, "minlength", te()), s = set_class(t, 1, "svelte-1h0c2oe", null, s, { "action-input": G() });
 				}), event("focus", t, function(...e) {
 					lt()?.apply(this, e);
-				}), delegated("focusout", t, vn), delegated("input", t, hn), event("paste", t, gn), delegated("click", t, function(...e) {
+				}), delegated("focusout", t, hn), delegated("input", t, fn), event("paste", t, pn), delegated("click", t, function(...e) {
 					ht()?.apply(this, e);
 				}), delegated("keydown", t, function(...e) {
 					gt()?.apply(this, e);
@@ -7062,10 +7396,10 @@ function Input(e, t) {
 				remove_input_defaults(t);
 				let n;
 				bind_this(t, (e) => set($t, e), () => get($t)), template_effect(() => {
-					set_attribute(t, "id", get(Ht)), set_attribute(t, "type", o()), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(Gt) ? null : yt() ?? null), set_attribute(t, "autocomplete", Me()), set_attribute(t, "inputmode", Re()), set_attribute(t, "name", Ue()), set_attribute(t, "role", vt()), set_attribute(t, "aria-expanded", bt()), set_attribute(t, "aria-autocomplete", xt()), set_attribute(t, "aria-controls", St()), set_attribute(t, "aria-activedescendant", Ct()), set_attribute(t, "aria-required", get(Bt) || null), set_attribute(t, "aria-invalid", get(nn) && !G() ? "true" : null), set_attribute(t, "aria-describedby", get(cn) || null), t.required = get(Bt) || null, set_attribute(t, "data-pw", at()), set_attribute(t, "testid", at()), t.disabled = f(), t.readOnly = p() || null, set_attribute(t, "spellcheck", h()), set_attribute(t, "maxlength", o() === "tel" ? null : R()), set_attribute(t, "minlength", te()), set_attribute(t, "min", ne()), set_attribute(t, "max", re()), n = set_class(t, 1, "svelte-1h0c2oe", null, n, { "action-input": G() });
+					set_attribute(t, "id", get(Ht)), set_attribute(t, "type", o()), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(Gt) ? null : yt() ?? null), set_attribute(t, "autocomplete", Me()), set_attribute(t, "inputmode", Re()), set_attribute(t, "name", Ue()), set_attribute(t, "role", vt()), set_attribute(t, "aria-expanded", bt()), set_attribute(t, "aria-autocomplete", xt()), set_attribute(t, "aria-controls", St()), set_attribute(t, "aria-activedescendant", Ct()), set_attribute(t, "aria-required", get(Bt) || null), set_attribute(t, "aria-invalid", get(an).ariaInvalid), set_attribute(t, "aria-describedby", get(an).describedBy), t.required = get(Bt) || null, set_attribute(t, "data-pw", at()), set_attribute(t, "testid", at()), t.disabled = f(), t.readOnly = p() || null, set_attribute(t, "spellcheck", h()), set_attribute(t, "maxlength", o() === "tel" ? null : R()), set_attribute(t, "minlength", te()), set_attribute(t, "min", ne()), set_attribute(t, "max", re()), n = set_class(t, 1, "svelte-1h0c2oe", null, n, { "action-input": G() });
 				}), event("focus", t, function(...e) {
 					lt()?.apply(this, e);
-				}), delegated("focusout", t, vn), delegated("input", t, hn), event("paste", t, gn), delegated("click", t, function(...e) {
+				}), delegated("focusout", t, hn), delegated("input", t, fn), event("paste", t, pn), delegated("click", t, function(...e) {
 					ht()?.apply(this, e);
 				}), delegated("keydown", t, function(...e) {
 					gt()?.apply(this, e);
@@ -7075,7 +7409,7 @@ function Input(e, t) {
 				be() ? e(s) : e(c, -1);
 			}), append(e, t);
 		};
-		var Sn = child(bn), Cn = (e) => {
+		var yn = child(_n), bn = (e) => {
 			var t = root_3$58(), n = child(t, !0), i = sibling(n), a = (e) => {
 				append(e, root_2$67());
 			};
@@ -7085,10 +7419,10 @@ function Input(e, t) {
 				set_attribute(t, "for", get(Ht)), set_text(n, s());
 			}), append(e, t);
 		};
-		if_block(Sn, (e) => {
-			get(Gt) && e(Cn);
+		if_block(yn, (e) => {
+			get(Gt) && e(bn);
 		});
-		var wn = sibling(Sn, 2), Tn = (t) => {
+		var xn = sibling(yn, 2), Sn = (t) => {
 			var n = root_8$24();
 			let i;
 			var a = child(n), o = (e) => {
@@ -7106,7 +7440,7 @@ function Input(e, t) {
 				}), append(e, t);
 			};
 			if_block(a, (e) => {
-				get(ln) && e(o);
+				get(on) && e(o);
 			});
 			var s = sibling(a, 2);
 			e(s);
@@ -7125,48 +7459,48 @@ function Input(e, t) {
 				}), append(e, t);
 			};
 			if_block(c, (e) => {
-				get(un) && e(l);
+				get(sn) && e(l);
 			}), reset(n), template_effect(() => i = set_class(n, 1, "input-field-wrap svelte-1h0c2oe", null, i, {
-				"has-left-icon": get(ln),
-				"has-right-icon": get(un)
+				"has-left-icon": get(on),
+				"has-right-icon": get(sn)
 			})), append(t, n);
-		}, En = (t) => {
+		}, Cn = (t) => {
 			e(t);
 		};
-		if_block(wn, (e) => {
-			get(ln) || get(un) ? e(Tn) : e(En, -1);
+		if_block(xn, (e) => {
+			get(on) || get(sn) ? e(Sn) : e(Cn, -1);
 		});
-		var Dn = sibling(wn, 2), On = (e) => {
+		var wn = sibling(xn, 2), Tn = (e) => {
 			var t = root_9$20(), n = child(t, !0);
 			reset(t), template_effect(() => {
-				set_attribute(t, "id", get(rn)), set_attribute(t, "data-pw", typeof at() == "string" && at().length > 0 ? `${at()}-error-message` : null), set_attribute(t, "testid", typeof at() == "string" && at().length > 0 ? `${at()}-error-message` : null), set_text(n, c());
+				set_attribute(t, "id", get(an).errorId), set_attribute(t, "data-pw", typeof at() == "string" && at().length > 0 ? `${at()}-error-message` : null), set_attribute(t, "testid", typeof at() == "string" && at().length > 0 ? `${at()}-error-message` : null), set_text(n, c());
 			}), append(e, t);
 		};
-		if_block(Dn, (e) => {
-			get(an) && e(On);
+		if_block(wn, (e) => {
+			get(an).showsError && e(Tn);
 		});
-		var kn = sibling(Dn, 2), An = (e) => {
+		var En = sibling(wn, 2), Dn = (e) => {
 			var t = root_10$17(), n = child(t, !0);
 			reset(t), template_effect(() => {
-				set_attribute(t, "id", get(on)), set_attribute(t, "data-pw", typeof at() == "string" && at().length > 0 ? `${at()}-info-message` : null), set_attribute(t, "testid", typeof at() == "string" && at().length > 0 ? `${at()}-info-message` : null), set_text(n, l());
+				set_attribute(t, "id", get(an).infoId), set_attribute(t, "data-pw", typeof at() == "string" && at().length > 0 ? `${at()}-info-message` : null), set_attribute(t, "testid", typeof at() == "string" && at().length > 0 ? `${at()}-info-message` : null), set_text(n, l());
 			}), append(e, t);
 		};
-		if_block(kn, (e) => {
-			get(sn) && e(An);
+		if_block(En, (e) => {
+			get(an).showsInfo && e(Dn);
 		});
-		var jn = sibling(kn, 2), Mn = (e) => {
+		var On = sibling(En, 2), kn = (e) => {
 			var t = root_11$15();
 			let n;
 			var i = child(t);
 			reset(t), template_effect(() => {
-				n = set_class(t, 1, "input-char-count svelte-1h0c2oe", null, n, { "at-limit": get(dn) >= get(fn) }), set_text(i, `${get(dn) ?? ""}/${get(fn) ?? ""}`);
+				n = set_class(t, 1, "input-char-count svelte-1h0c2oe", null, n, { "at-limit": get(cn) >= get(ln) }), set_text(i, `${get(cn) ?? ""}/${get(ln) ?? ""}`);
 			}), append(e, t);
 		};
-		if_block(jn, (e) => {
-			be() && zt() && !G() && e(Mn);
-		}), reset(bn);
+		if_block(On, (e) => {
+			be() && zt() && !G() && e(kn);
+		}), reset(_n);
 	}
-	return template_effect(() => xn = set_class(bn, 1, `input-container ${_t() ?? "" ?? ""}`, "svelte-1h0c2oe", xn, { "input-error": get(nn) && !G() })), append(e, bn), pop(yn);
+	return template_effect(() => vn = set_class(_n, 1, `input-container ${_t() ?? "" ?? ""}`, "svelte-1h0c2oe", vn, { "input-error": get(nn) && !G() })), append(e, _n), pop(gn);
 }
 delegate([
 	"focusout",
@@ -8015,7 +8349,7 @@ delegate(["input", "change"]), create_custom_element(Slider, {
 //#region src/lib/SplitInput/SplitInput.svelte
 var root$94 = /* @__PURE__ */ from_html("<span class=\"field-group-separator svelte-1gcz5cs\"> </span>"), root_1$83 = /* @__PURE__ */ from_html("<span class=\"field-group-label svelte-1gcz5cs\"> </span>"), root_2$63 = /* @__PURE__ */ from_html("<!> <div class=\"field-group-item svelte-1gcz5cs\"><!> <!></div>", 1), root_3$55 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-1gcz5cs\"> </div>"), root_4$46 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-1gcz5cs\"> </div>"), root_5$38 = /* @__PURE__ */ from_html("<div></div> <!> <!>", 1), $$css$177 = {
 	hash: "svelte-1gcz5cs",
-	code: ".field-error.svelte-1gcz5cs {color:var(--field-error-color, #c5120a);font-size:var(--field-error-font-size, 12px);margin:var(--field-error-margin, 4px 0 0 0);}.field-info.svelte-1gcz5cs {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}.field-group.svelte-1gcz5cs {display:flex;align-items:flex-start;gap:var(--field-group-gap, 8px);width:var(--field-group-width, fit-content);}.field-group-item.svelte-1gcz5cs {display:flex;flex-direction:column;align-items:center;gap:var(--field-group-label-gap, 3px);flex:1;min-width:0;}.field-group-item.svelte-1gcz5cs .field-group-input {--input-border: var(--field-group-border, 1px solid #d1d5db);--input-radius: var(--field-group-border-radius, 6px);--input-focus-border: var(--field-group-focus-border, 1px solid #3b82f6);--input-width: var(--field-group-input-width, 100%);--input-height: var(--field-group-input-height, 36px);--input-text-align: var(--field-group-text-align, center);--input-font-size: var(--field-group-font-size, 14px);--input-font-weight: var(--field-group-font-weight, 500);--input-font-family: var(--field-group-font-family);--input-padding: var(--field-group-input-padding, 0 6px);--input-margin: 0;--input-box-shadow: none;}.field-group-label.svelte-1gcz5cs {font-size:var(--field-group-label-font-size, 10px);font-weight:var(--field-group-label-font-weight, 500);color:var(--field-group-label-color, #4b5563);text-transform:uppercase;letter-spacing:0.05em;}.field-group-separator.svelte-1gcz5cs {display:flex;align-items:center;height:var(--field-group-input-height, 36px);font-size:var(--field-group-separator-font-size, 16px);color:var(--field-group-separator-color, #9ca3af);flex-shrink:0;}"
+	code: ".field-error.svelte-1gcz5cs {color:var(--field-error-color, #c5120a);font-size:var(--field-error-font-size, 12px);margin:var(--field-error-margin, 4px 0 0 0);}.field-info.svelte-1gcz5cs {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}.field-group.svelte-1gcz5cs {display:flex;align-items:flex-start;gap:var(--field-group-gap, 8px);width:var(--field-group-width, fit-content);}.field-group-item.svelte-1gcz5cs {display:flex;flex-direction:column;align-items:center;gap:var(--field-group-label-gap, 3px);flex:1;min-width:0;}.field-group-item.svelte-1gcz5cs .field-group-input {--input-border: var(--field-group-border, 1px solid #d1d5db);--input-radius: var(--field-group-border-radius, 6px);--input-focus-border: var(--field-group-focus-border, 1px solid #3b82f6);--input-width: var(--field-group-input-width, 100%);--input-height: var(--field-group-input-height, 36px);--input-text-align: var(--field-group-text-align, center);--input-font-size: var(--field-group-font-size, 14px);--input-font-weight: var(--field-group-font-weight, 500);--input-font-family: var(--field-group-font-family);--input-padding: var(--field-group-input-padding, 0 6px);--input-margin: 0;--input-box-shadow: none;}.field-group-label.svelte-1gcz5cs {font-size:var(--field-group-label-font-size, 10px);font-weight:var(--field-group-label-font-weight, 500);color:var(--field-group-label-color, #4b5563);text-transform:uppercase;letter-spacing:0.05em;}.field-group-separator.svelte-1gcz5cs {display:flex;align-items:center;height:var(--field-group-input-height, 36px);font-size:var(--field-group-separator-font-size, 16px);color:var(--field-group-separator-color, #6b7280);flex-shrink:0;}"
 };
 function SplitInput(e, t) {
 	let n = props_id();
@@ -9908,7 +10242,7 @@ customElements.define("sui-combobox", create_custom_element(Combobox_wc, {
 //#region src/lib/assets/search.svg?raw
 var search_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n  <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n</svg>\n", root$90 = /* @__PURE__ */ from_html("<span class=\"command-menu-search-icon svelte-rk55q\"></span>"), root_1$80 = /* @__PURE__ */ from_html("<div class=\"command-menu-empty svelte-rk55q\"> </div>"), root_2$60 = /* @__PURE__ */ from_html("<div class=\"command-menu-group-heading svelte-rk55q\"> </div>"), root_3$52 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-icon svelte-rk55q\"><!></span>"), root_4$43 = /* @__PURE__ */ from_html("<div class=\"command-menu-item-icon-img-wrapper svelte-rk55q\"><!></div>"), root_5$35 = /* @__PURE__ */ from_html("<kbd class=\"command-menu-kbd svelte-rk55q\"> </kbd>"), root_6$30 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-shortcut svelte-rk55q\"></span>"), root_7$27 = /* @__PURE__ */ from_html("<button type=\"button\" role=\"option\" tabindex=\"-1\"><!> <span class=\"command-menu-item-label svelte-rk55q\"> </span> <!></button>"), root_8$22 = /* @__PURE__ */ from_html("<!> <!>", 1), root_9$18 = /* @__PURE__ */ from_html("<div role=\"dialog\" aria-modal=\"true\" aria-label=\"Command menu\" tabindex=\"-1\"><div class=\"command-menu-dialog svelte-rk55q\"><div class=\"command-menu-input-wrapper svelte-rk55q\"><!> <input type=\"text\" class=\"command-menu-input svelte-rk55q\" autocomplete=\"off\" spellcheck=\"false\" role=\"combobox\" aria-autocomplete=\"list\"/></div> <div class=\"command-menu-separator svelte-rk55q\"></div> <div class=\"command-menu-list svelte-rk55q\" role=\"listbox\"><!></div></div></div>"), $$css$172 = {
 	hash: "svelte-rk55q",
-	code: ".command-menu-overlay.svelte-rk55q {position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--command-menu-overlay-background, rgba(0, 0, 0, 0.5));display:flex;align-items:var(--command-menu-overlay-align, flex-start);justify-content:center;padding-top:var(--command-menu-overlay-padding-top, 20vh);z-index:var(--command-menu-z-index, 50);-webkit-tap-highlight-color:transparent;}.command-menu-dialog.svelte-rk55q {background-color:var(--command-menu-background, #ffffff);border-radius:var(--command-menu-border-radius, var(--radius, 4px));box-shadow:var(--command-menu-box-shadow, 0 16px 70px rgba(0, 0, 0, 0.2));width:var(--command-menu-width, 560px);max-width:var(--command-menu-max-width, 90vw);max-height:var(--command-menu-max-height, 60vh);display:flex;flex-direction:column;overflow:hidden;border:var(--command-menu-border, 1px solid #e2e8f0);}.command-menu-input-wrapper.svelte-rk55q {display:flex;align-items:center;padding:var(--command-menu-input-wrapper-padding, 12px 16px);gap:var(--command-menu-input-wrapper-gap, 10px);}.command-menu-search-icon.svelte-rk55q {display:inline-flex;align-items:center;justify-content:center;width:var(--command-menu-search-icon-size, 20px);height:var(--command-menu-search-icon-size, 20px);color:var(--command-menu-search-icon-color, #94a3b8);flex-shrink:0;}.command-menu-search-icon.svelte-rk55q svg {width:100%;height:100%;}.command-menu-input.svelte-rk55q {flex:1;border:none;outline:none;background:transparent;font-size:var(--command-menu-input-font-size, 16px);font-family:var(--command-menu-input-font-family, inherit);font-weight:var(--command-menu-input-font-weight, 400);color:var(--command-menu-input-color, #1e293b);caret-color:var(--command-menu-input-caret-color, #3b82f6);}.command-menu-input.svelte-rk55q::placeholder {color:var(--command-menu-input-placeholder-color, #94a3b8);}.command-menu-separator.svelte-rk55q {height:var(--command-menu-separator-height, 1px);background-color:var(--command-menu-separator-color, #e2e8f0);flex-shrink:0;}.command-menu-list.svelte-rk55q {overflow-y:auto;padding:var(--command-menu-list-padding, 8px);scrollbar-width:var(--command-menu-scrollbar-width, thin);}.command-menu-empty.svelte-rk55q {padding:var(--command-menu-empty-padding, 32px 16px);text-align:center;color:var(--command-menu-empty-color, #94a3b8);font-size:var(--command-menu-empty-font-size, 14px);font-style:var(--command-menu-empty-font-style, normal);}.command-menu-group-heading.svelte-rk55q {padding:var(--command-menu-group-heading-padding, 8px 12px 4px);font-size:var(--command-menu-group-heading-font-size, 12px);font-weight:var(--command-menu-group-heading-font-weight, 600);color:var(--command-menu-group-heading-color, #94a3b8);text-transform:var(--command-menu-group-heading-text-transform, uppercase);letter-spacing:var(--command-menu-group-heading-letter-spacing, 0.05em);}.command-menu-item.svelte-rk55q {display:flex;align-items:center;padding:var(--command-menu-item-padding, 10px 12px);border-radius:var(--command-menu-item-border-radius, var(--radius, 4px));cursor:pointer;gap:var(--command-menu-item-gap, 10px);font-size:var(--command-menu-item-font-size, 14px);color:var(--command-menu-item-color, #334155);transition:background-color\n      var(--command-menu-item-transition-duration, var(--motion-duration, 0.1s))\n      var(--command-menu-item-transition-easing, var(--motion-easing, ease));background:none;border:none;width:100%;text-align:left;font-family:inherit;}.command-menu-item.active.svelte-rk55q {background-color:var(--command-menu-item-active-background, #f1f5f9);color:var(--command-menu-item-active-color, #0f172a);}.command-menu-item.disabled.svelte-rk55q {opacity:var(--command-menu-item-disabled-opacity, 0.4);cursor:not-allowed;}.command-menu-item-icon.svelte-rk55q {display:flex;align-items:center;justify-content:center;flex-shrink:0;}.command-menu-item-icon-img-wrapper.svelte-rk55q {--image-width: var(--command-menu-item-icon-size, 20px);--image-height: var(--command-menu-item-icon-size, 20px);\n\n    /* Mirrors --command-menu-search-icon-color, which this component already had. */color:var(--command-menu-item-icon-color, inherit);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.command-menu-item-label.svelte-rk55q {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.command-menu-item-shortcut.svelte-rk55q {display:flex;align-items:center;gap:var(--command-menu-shortcut-gap, 4px);flex-shrink:0;}.command-menu-kbd.svelte-rk55q {display:inline-flex;align-items:center;justify-content:center;min-width:var(--command-menu-kbd-min-width, 24px);height:var(--command-menu-kbd-height, 22px);padding:var(--command-menu-kbd-padding, 0 6px);border-radius:var(--command-menu-kbd-border-radius, var(--radius, 4px));background-color:var(--command-menu-kbd-background, #f1f5f9);border:var(--command-menu-kbd-border, 1px solid #e2e8f0);color:var(--command-menu-kbd-color, #64748b);font-size:var(--command-menu-kbd-font-size, 11px);font-family:var(--command-menu-kbd-font-family, inherit);font-weight:var(--command-menu-kbd-font-weight, 500);box-shadow:var(--command-menu-kbd-box-shadow, 0 1px 0 #e2e8f0);}"
+	code: ".command-menu-overlay.svelte-rk55q {position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--command-menu-overlay-background, rgba(0, 0, 0, 0.5));display:flex;align-items:var(--command-menu-overlay-align, flex-start);justify-content:center;padding-top:var(--command-menu-overlay-padding-top, 20vh);z-index:var(--command-menu-z-index, 50);-webkit-tap-highlight-color:transparent;}.command-menu-dialog.svelte-rk55q {background-color:var(--command-menu-background, #ffffff);border-radius:var(--command-menu-border-radius, var(--radius, 4px));box-shadow:var(--command-menu-box-shadow, 0 16px 70px rgba(0, 0, 0, 0.2));width:var(--command-menu-width, 560px);max-width:var(--command-menu-max-width, 90vw);max-height:var(--command-menu-max-height, 60vh);display:flex;flex-direction:column;overflow:hidden;border:var(--command-menu-border, 1px solid #e2e8f0);}.command-menu-input-wrapper.svelte-rk55q {display:flex;align-items:center;padding:var(--command-menu-input-wrapper-padding, 12px 16px);gap:var(--command-menu-input-wrapper-gap, 10px);}.command-menu-search-icon.svelte-rk55q {display:inline-flex;align-items:center;justify-content:center;width:var(--command-menu-search-icon-size, 20px);height:var(--command-menu-search-icon-size, 20px);color:var(--command-menu-search-icon-color, #94a3b8);flex-shrink:0;}.command-menu-search-icon.svelte-rk55q svg {width:100%;height:100%;}.command-menu-input.svelte-rk55q {flex:1;border:none;outline:none;background:transparent;font-size:var(--command-menu-input-font-size, 16px);font-family:var(--command-menu-input-font-family, inherit);font-weight:var(--command-menu-input-font-weight, 400);color:var(--command-menu-input-color, #1e293b);caret-color:var(--command-menu-input-caret-color, #3b82f6);}\n\n  /* The input is the only real Tab stop the overlay currently renders (list\n     items are a roving aria-activedescendant selection, not DOM focus -- see\n     .active below), so it is also the only element here that WCAG 2.4.7\n     applies to. A real text input, so :focus rather than :focus-visible: the\n     ring must stay visible regardless of input modality, matching Input.svelte's\n     own textarea/input convention. Positive offset (not Sheet/Modal's inset\n     -2px) because the input sits inside .command-menu-input-wrapper's own\n     padding, not flush against the dialog's edge. */.command-menu-input.svelte-rk55q:focus {outline:var(--command-menu-input-focus-outline, 2px solid #2563eb);outline-offset:var(--command-menu-input-focus-outline-offset, 2px);}.command-menu-input.svelte-rk55q::placeholder {color:var(--command-menu-input-placeholder-color, #94a3b8);}.command-menu-separator.svelte-rk55q {height:var(--command-menu-separator-height, 1px);background-color:var(--command-menu-separator-color, #e2e8f0);flex-shrink:0;}.command-menu-list.svelte-rk55q {overflow-y:auto;padding:var(--command-menu-list-padding, 8px);scrollbar-width:var(--command-menu-scrollbar-width, thin);}.command-menu-empty.svelte-rk55q {padding:var(--command-menu-empty-padding, 32px 16px);text-align:center;color:var(--command-menu-empty-color, #94a3b8);font-size:var(--command-menu-empty-font-size, 14px);font-style:var(--command-menu-empty-font-style, normal);}.command-menu-group-heading.svelte-rk55q {padding:var(--command-menu-group-heading-padding, 8px 12px 4px);font-size:var(--command-menu-group-heading-font-size, 12px);font-weight:var(--command-menu-group-heading-font-weight, 600);color:var(--command-menu-group-heading-color, #94a3b8);text-transform:var(--command-menu-group-heading-text-transform, uppercase);letter-spacing:var(--command-menu-group-heading-letter-spacing, 0.05em);}.command-menu-item.svelte-rk55q {display:flex;align-items:center;padding:var(--command-menu-item-padding, 10px 12px);border-radius:var(--command-menu-item-border-radius, var(--radius, 4px));cursor:pointer;gap:var(--command-menu-item-gap, 10px);font-size:var(--command-menu-item-font-size, 14px);color:var(--command-menu-item-color, #334155);transition:background-color\n      var(--command-menu-item-transition-duration, var(--motion-duration, 0.1s))\n      var(--command-menu-item-transition-easing, var(--motion-easing, ease));background:none;border:none;width:100%;text-align:left;font-family:inherit;}.command-menu-item.active.svelte-rk55q {background-color:var(--command-menu-item-active-background, #f1f5f9);color:var(--command-menu-item-active-color, #0f172a);}.command-menu-item.disabled.svelte-rk55q {opacity:var(--command-menu-item-disabled-opacity, 0.4);cursor:not-allowed;}.command-menu-item-icon.svelte-rk55q {display:flex;align-items:center;justify-content:center;flex-shrink:0;}.command-menu-item-icon-img-wrapper.svelte-rk55q {--image-width: var(--command-menu-item-icon-size, 20px);--image-height: var(--command-menu-item-icon-size, 20px);\n\n    /* Mirrors --command-menu-search-icon-color, which this component already had. */color:var(--command-menu-item-icon-color, inherit);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.command-menu-item-label.svelte-rk55q {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.command-menu-item-shortcut.svelte-rk55q {display:flex;align-items:center;gap:var(--command-menu-shortcut-gap, 4px);flex-shrink:0;}.command-menu-kbd.svelte-rk55q {display:inline-flex;align-items:center;justify-content:center;min-width:var(--command-menu-kbd-min-width, 24px);height:var(--command-menu-kbd-height, 22px);padding:var(--command-menu-kbd-padding, 0 6px);border-radius:var(--command-menu-kbd-border-radius, var(--radius, 4px));background-color:var(--command-menu-kbd-background, #f1f5f9);border:var(--command-menu-kbd-border, 1px solid #e2e8f0);color:var(--command-menu-kbd-color, #64748b);font-size:var(--command-menu-kbd-font-size, 11px);font-family:var(--command-menu-kbd-font-family, inherit);font-weight:var(--command-menu-kbd-font-weight, 500);box-shadow:var(--command-menu-kbd-box-shadow, 0 1px 0 #e2e8f0);}"
 };
 function CommandMenu(e, t) {
 	let n = props_id();
@@ -10226,14 +10560,14 @@ customElements.define("sui-command-menu", create_custom_element(CommandMenu_wc,
 }, ["search-icon"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Gauge/Gauge.svelte
-var root$88 = /* @__PURE__ */ from_html("<div class=\"label svelte-ms0oc6\"> </div>"), root_1$79 = /* @__PURE__ */ from_html("<div role=\"progressbar\"><svg class=\"svelte-ms0oc6\"><circle class=\"track svelte-ms0oc6\" fill=\"none\"></circle><circle class=\"bar svelte-ms0oc6\" fill=\"none\" stroke-linecap=\"round\"></circle></svg> <!></div>"), $$css$170 = {
+var root$88 = /* @__PURE__ */ from_html("<div class=\"label svelte-ms0oc6\"><!></div>"), root_1$79 = /* @__PURE__ */ from_html("<div role=\"progressbar\"><svg class=\"svelte-ms0oc6\"><circle class=\"track svelte-ms0oc6\" fill=\"none\"></circle><circle class=\"bar svelte-ms0oc6\" fill=\"none\" stroke-linecap=\"round\"></circle></svg> <!></div>"), $$css$170 = {
 	hash: "svelte-ms0oc6",
 	code: ".gauge.svelte-ms0oc6 {position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--gauge-size, 120px);height:var(--gauge-size, 120px);}svg.svelte-ms0oc6 {display:block;width:100%;height:100%;}.track.svelte-ms0oc6 {stroke:var(--gauge-track-color, #e0e0e0);stroke-width:var(--gauge-stroke-width, 8);}.bar.svelte-ms0oc6 {stroke:var(--gauge-bar-color, #2196f3);stroke-width:var(--gauge-stroke-width, 8);transition:stroke-dashoffset var(--gauge-transition-duration, 0.3s) ease;}.label.svelte-ms0oc6 {position:absolute;font-size:var(--gauge-label-font-size, 24px);font-weight:var(--gauge-label-font-weight, 600);font-family:var(--gauge-label-font-family, inherit);color:var(--gauge-label-color, #333);}"
 };
 function Gauge(e, t) {
 	push(t, !0), append_styles$1(e, $$css$170);
-	let n = prop(t, "value", 7), i = prop(t, "max", 7, 100), a = prop(t, "showLabel", 7, !0), o = prop(t, "labelFormatter", 7), s = prop(t, "ariaLabel", 7), c = prop(t, "testId", 7), l = prop(t, "classes", 7), u = 100, f = 100 / 2, p = 92 / 2, h = 2 * Math.PI * 46, S = /* @__PURE__ */ user_derived(() => i() > 0 ? Math.min(100, Math.max(0, n() / i() * 100)) : 0), C = /* @__PURE__ */ user_derived(() => h - get(S) / 100 * h), k = /* @__PURE__ */ user_derived(() => o() ? o()(n(), i()) : `${Math.round(get(S))}%`);
-	var R = {
+	let n = prop(t, "value", 7), i = prop(t, "max", 7, 100), a = prop(t, "showLabel", 7, !0), o = prop(t, "labelFormatter", 7), s = prop(t, "animateValue", 7, !1), c = prop(t, "ariaLabel", 7), l = prop(t, "testId", 7), u = prop(t, "classes", 7), f = 100, p = 100 / 2, h = 92 / 2, S = 2 * Math.PI * 46, C = /* @__PURE__ */ user_derived(() => i() > 0 ? Math.min(100, Math.max(0, n() / i() * 100)) : 0), k = /* @__PURE__ */ user_derived(() => S - get(C) / 100 * S), R = /* @__PURE__ */ user_derived(() => Math.round(get(C))), te = /* @__PURE__ */ user_derived(() => o() ? o()(n(), i()) : `${get(R)}%`);
+	var ne = {
 		get value() {
 			return n();
 		},
@@ -10258,47 +10592,75 @@ function Gauge(e, t) {
 		set labelFormatter(e) {
 			o(e), flushSync();
 		},
-		get ariaLabel() {
+		get animateValue() {
 			return s();
 		},
-		set ariaLabel(e) {
+		set animateValue(e = !1) {
 			s(e), flushSync();
 		},
-		get testId() {
+		get ariaLabel() {
 			return c();
 		},
-		set testId(e) {
+		set ariaLabel(e) {
 			c(e), flushSync();
 		},
-		get classes() {
+		get testId() {
 			return l();
 		},
-		set classes(e) {
+		set testId(e) {
 			l(e), flushSync();
+		},
+		get classes() {
+			return u();
+		},
+		set classes(e) {
+			u(e), flushSync();
 		}
-	}, te = root_1$79();
-	set_attribute(te, "aria-valuemin", 0), set_attribute(te, "aria-valuemax", 100);
-	var ne = child(te);
-	set_attribute(ne, "viewBox", "0 0 100 100");
-	var re = child(ne);
-	set_attribute(re, "cx", 50), set_attribute(re, "cy", 50), set_attribute(re, "r", 46);
-	var G = sibling(re);
-	set_attribute(G, "cx", 50), set_attribute(G, "cy", 50), set_attribute(G, "r", 46), set_attribute(G, "stroke-dasharray", h), set_attribute(G, "transform", "rotate(-90 50 50)"), reset(ne);
-	var be = sibling(ne, 2), Me = (e) => {
-		var t = root$88(), n = child(t, !0);
-		reset(t), template_effect(() => set_text(n, get(k))), append(e, t);
+	}, re = root_1$79();
+	set_attribute(re, "aria-valuemin", 0), set_attribute(re, "aria-valuemax", 100);
+	var G = child(re);
+	set_attribute(G, "viewBox", "0 0 100 100");
+	var be = child(G);
+	set_attribute(be, "cx", 50), set_attribute(be, "cy", 50), set_attribute(be, "r", 46);
+	var Me = sibling(be);
+	set_attribute(Me, "cx", 50), set_attribute(Me, "cy", 50), set_attribute(Me, "r", 46), set_attribute(Me, "stroke-dasharray", S), set_attribute(Me, "transform", "rotate(-90 50 50)"), reset(G);
+	var Re = sibling(G, 2), Ue = (e) => {
+		var t = root$88(), n = child(t), i = (e) => {
+			var t = comment(), n = first_child(t), i = (e) => {
+				AnimatedNumber(e, { get value() {
+					return get(te);
+				} });
+			}, a = (e) => {
+				{
+					let t = /* @__PURE__ */ user_derived(() => `${get(R)}%`);
+					AnimatedNumber(e, { get value() {
+						return get(t);
+					} });
+				}
+			};
+			if_block(n, (e) => {
+				o() ? e(i) : e(a, -1);
+			}), append(e, t);
+		}, a = (e) => {
+			var t = text();
+			template_effect(() => set_text(t, get(te))), append(e, t);
+		};
+		if_block(n, (e) => {
+			s() ? e(i) : e(a, -1);
+		}), reset(t), append(e, t);
 	};
-	return if_block(be, (e) => {
-		a() && e(Me);
-	}), reset(te), template_effect(() => {
-		set_class(te, 1, `gauge ${l() ?? "" ?? ""}`, "svelte-ms0oc6"), set_attribute(te, "data-pw", typeof c() == "string" ? c() : null), set_attribute(te, "testid", typeof c() == "string" ? c() : null), set_attribute(te, "aria-valuenow", get(S)), set_attribute(te, "aria-label", s() ?? get(k)), set_attribute(G, "stroke-dashoffset", get(C));
-	}), append(e, te), pop(R);
+	return if_block(Re, (e) => {
+		a() && e(Ue);
+	}), reset(re), template_effect(() => {
+		set_class(re, 1, `gauge ${u() ?? "" ?? ""}`, "svelte-ms0oc6"), set_attribute(re, "data-pw", typeof l() == "string" ? l() : null), set_attribute(re, "testid", typeof l() == "string" ? l() : null), set_attribute(re, "aria-valuenow", get(C)), set_attribute(re, "aria-label", c() ?? get(te)), set_attribute(Me, "stroke-dashoffset", get(k));
+	}), append(e, re), pop(ne);
 }
 create_custom_element(Gauge, {
 	value: {},
 	max: {},
 	showLabel: {},
 	labelFormatter: {},
+	animateValue: {},
 	ariaLabel: {},
 	testId: {},
 	classes: {}
@@ -10338,7 +10700,12 @@ customElements.define("sui-gauge", create_custom_element(Gauge_wc, {
 		attribute: "max",
 		type: "Number"
 	},
-	labelFormatter: { type: "Object" }
+	labelFormatter: { type: "Object" },
+	animateValue: {
+		attribute: "animate-value",
+		reflect: !0,
+		type: "Boolean"
+	}
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/GridItem/GridItem.svelte
@@ -11192,7 +11559,7 @@ customElements.define("sui-input", create_custom_element(Input_wc, {
 //#region src/lib/KeyboardInput/KeyboardInput.svelte
 var root$83 = /* @__PURE__ */ from_html("<span class=\"separator svelte-14lwsom\"> </span>"), root_1$75 = /* @__PURE__ */ from_html("<!> <kbd class=\"key svelte-14lwsom\"> </kbd>", 1), root_2$57 = /* @__PURE__ */ from_html("<span></span>"), $$css$158 = {
 	hash: "svelte-14lwsom",
-	code: ".keyboard-input.svelte-14lwsom {display:inline-flex;align-items:center;gap:var(--keyboard-input-gap, 4px);font-family:var(--keyboard-input-font-family, inherit);font-size:var(--keyboard-input-font-size, 13px);vertical-align:baseline;cursor:var(--keyboard-input-cursor, default);}.separator.svelte-14lwsom {color:var(--keyboard-input-separator-color, #888888);font-size:var(--keyboard-input-separator-font-size, 0.85em);user-select:none;}.key.svelte-14lwsom {display:inline-flex;align-items:center;justify-content:center;font-family:var(--keyboard-input-key-font-family, inherit);font-weight:var(--keyboard-input-key-font-weight, 500);color:var(--keyboard-input-key-color, #333333);background-color:var(--keyboard-input-key-background, #f5f5f5);border:var(--keyboard-input-key-border, 1px solid #d1d1d1);border-radius:var(--keyboard-input-key-border-radius, var(--radius, 4px));box-shadow:var(--keyboard-input-key-box-shadow, 0 1px 0 #c4c4c4);min-width:var(--keyboard-input-key-min-width, 1.6em);padding:var(--keyboard-input-key-padding, 2px 6px);text-align:center;white-space:nowrap;line-height:1;}"
+	code: ".keyboard-input.svelte-14lwsom {display:inline-flex;align-items:center;gap:var(--keyboard-input-gap, 4px);font-family:var(--keyboard-input-font-family, inherit);font-size:var(--keyboard-input-font-size, 13px);vertical-align:baseline;cursor:var(--keyboard-input-cursor, default);}.separator.svelte-14lwsom {color:var(--keyboard-input-separator-color, #6b7280);font-size:var(--keyboard-input-separator-font-size, 0.85em);user-select:none;}.key.svelte-14lwsom {display:inline-flex;align-items:center;justify-content:center;font-family:var(--keyboard-input-key-font-family, inherit);font-weight:var(--keyboard-input-key-font-weight, 500);color:var(--keyboard-input-key-color, #333333);background-color:var(--keyboard-input-key-background, #f5f5f5);border:var(--keyboard-input-key-border, 1px solid #d1d1d1);border-radius:var(--keyboard-input-key-border-radius, var(--radius, 4px));box-shadow:var(--keyboard-input-key-box-shadow, 0 1px 0 #c4c4c4);min-width:var(--keyboard-input-key-min-width, 1.6em);padding:var(--keyboard-input-key-padding, 2px 6px);text-align:center;white-space:nowrap;line-height:1;}"
 };
 function KeyboardInput(e, t) {
 	push(t, !0), append_styles$1(e, $$css$158);
@@ -11740,14 +12107,14 @@ customElements.define("sui-pill", create_custom_element(Pill_wc, {
 }, ["leading-icon", "dismiss-icon"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Progress/Progress.svelte
-var root$80 = /* @__PURE__ */ from_html("<div class=\"label svelte-1c2jqm2\"> </div>"), root_1$72 = /* @__PURE__ */ from_html("<div role=\"progressbar\"><div class=\"track svelte-1c2jqm2\"><div></div></div> <!></div>"), $$css$150 = {
+var root$80 = /* @__PURE__ */ from_html("<div class=\"label svelte-1c2jqm2\"><!></div>"), root_1$72 = /* @__PURE__ */ from_html("<div role=\"progressbar\"><div class=\"track svelte-1c2jqm2\"><div></div></div> <!></div>"), $$css$150 = {
 	hash: "svelte-1c2jqm2",
 	code: ".container.svelte-1c2jqm2 {display:flex;align-items:center;width:var(--progress-container-width, 100%);padding:var(--progress-container-padding, 0);gap:var(--progress-container-gap, 8px);}.track.svelte-1c2jqm2 {flex:1;height:var(--progress-track-height, 8px);background:var(--progress-track-background, #e0e0e0);border-radius:var(--progress-track-border-radius, var(--radius, 4px));overflow:hidden;}.bar.svelte-1c2jqm2 {height:100%;background:var(--progress-bar-background, #2196f3);border-radius:var(--progress-bar-border-radius, var(--radius, 4px));transition:var(--progress-bar-transition, width 0.3s ease);}.bar.indeterminate.svelte-1c2jqm2 {width:30%;\n    animation: svelte-1c2jqm2-indeterminate var(--progress-indeterminate-duration, 1.5s) ease-in-out infinite;}.label.svelte-1c2jqm2 {font-size:var(--progress-label-font-size, 14px);font-weight:var(--progress-label-font-weight, 500);color:var(--progress-label-color, #333);font-family:var(--progress-label-font-family, inherit);margin:var(--progress-label-margin, 0);}\n\n  @keyframes svelte-1c2jqm2-indeterminate {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(400%);\n    }\n  }\n  /* An indefinite animation is the case this preference exists for: it never\n     ends, so a user who asked the OS to minimise motion gets a permanent loop.\n     The animation stops, but the element must still read as \"busy\" -- a guard\n     that leaves nothing on screen, or leaves a frame that means something else,\n     is worse than the motion it removed. This block lives in the component's own\n     <style> because that is the only stylesheet that reaches inside the shadow\n     root a custom-element consumer gets. */\n  @media (prefers-reduced-motion: reduce) {.bar.indeterminate.svelte-1c2jqm2 {\n      /* `animation: none` alone would strand a 30%-wide bar at the left of the\n         track, which is indistinguishable from determinate 30% progress -- the\n         one reading that is actually wrong. A full-width bar at reduced opacity\n         says \"busy, amount unknown\", which is what indeterminate means and what\n         aria-valuetext already announces. */width:100%;transform:none;\n      animation: none;opacity:var(--progress-indeterminate-reduced-motion-opacity, 0.5);}\n  }"
 };
 function Progress(e, t) {
 	push(t, !0), append_styles$1(e, $$css$150);
-	let n = prop(t, "value", 7), i = prop(t, "max", 7, 100), a = prop(t, "showLabel", 7, !1), o = prop(t, "ariaLabel", 7), s = prop(t, "testId", 7), c = prop(t, "classes", 7), l = /* @__PURE__ */ user_derived(() => Number.isFinite(n()) && Number.isFinite(i()) && i() > 0), u = /* @__PURE__ */ user_derived(() => get(l) ? Math.min(100, Math.max(0, n() / i() * 100)) : 0), f = /* @__PURE__ */ user_derived(() => n() < 0), p = /* @__PURE__ */ user_derived(() => Math.round(get(u) * 100) / 100), h = /* @__PURE__ */ user_derived(() => get(f) ? "Loading" : `${Math.round(get(u))}%`);
-	var S = {
+	let n = prop(t, "value", 7), i = prop(t, "max", 7, 100), a = prop(t, "showLabel", 7, !1), o = prop(t, "animateValue", 7, !1), s = prop(t, "ariaLabel", 7), c = prop(t, "testId", 7), l = prop(t, "classes", 7), u = /* @__PURE__ */ user_derived(() => Number.isFinite(n()) && Number.isFinite(i()) && i() > 0), f = /* @__PURE__ */ user_derived(() => get(u) ? Math.min(100, Math.max(0, n() / i() * 100)) : 0), p = /* @__PURE__ */ user_derived(() => n() < 0), h = /* @__PURE__ */ user_derived(() => Math.round(get(f) * 100) / 100), S = /* @__PURE__ */ user_derived(() => get(p) ? "Loading" : `${Math.round(get(f))}%`);
+	var C = {
 		get value() {
 			return n();
 		},
@@ -11766,43 +12133,62 @@ function Progress(e, t) {
 		set showLabel(e = !1) {
 			a(e), flushSync();
 		},
-		get ariaLabel() {
+		get animateValue() {
 			return o();
 		},
-		set ariaLabel(e) {
+		set animateValue(e = !1) {
 			o(e), flushSync();
 		},
-		get testId() {
+		get ariaLabel() {
 			return s();
 		},
-		set testId(e) {
+		set ariaLabel(e) {
 			s(e), flushSync();
 		},
-		get classes() {
+		get testId() {
 			return c();
 		},
-		set classes(e) {
+		set testId(e) {
 			c(e), flushSync();
+		},
+		get classes() {
+			return l();
+		},
+		set classes(e) {
+			l(e), flushSync();
 		}
-	}, C = root_1$72();
-	set_attribute(C, "aria-valuemin", 0), set_attribute(C, "aria-valuemax", 100);
-	var k = child(C), R = child(k);
-	let te, ne;
-	reset(k);
-	var re = sibling(k, 2), G = (e) => {
-		var t = root$80(), n = child(t, !0);
-		reset(t), template_effect(() => set_text(n, get(h))), append(e, t);
+	}, k = root_1$72();
+	set_attribute(k, "aria-valuemin", 0), set_attribute(k, "aria-valuemax", 100);
+	var R = child(k), te = child(R);
+	let ne, re;
+	reset(R);
+	var G = sibling(R, 2), be = (e) => {
+		var t = root$80(), n = child(t), i = (e) => {
+			{
+				let t = /* @__PURE__ */ user_derived(() => `${Math.round(get(f))}%`);
+				AnimatedNumber(e, { get value() {
+					return get(t);
+				} });
+			}
+		}, a = (e) => {
+			var t = text();
+			template_effect(() => set_text(t, get(S))), append(e, t);
+		};
+		if_block(n, (e) => {
+			o() ? e(i) : e(a, -1);
+		}), reset(t), append(e, t);
 	};
-	return if_block(re, (e) => {
-		a() && !get(f) && e(G);
-	}), reset(C), template_effect(() => {
-		set_class(C, 1, `container ${c() ?? "" ?? ""}`, "svelte-1c2jqm2"), set_attribute(C, "data-pw", typeof s() == "string" ? s() : null), set_attribute(C, "testid", typeof s() == "string" ? s() : null), set_attribute(C, "aria-valuenow", get(f) ? null : get(p)), set_attribute(C, "aria-valuetext", get(f) ? "indeterminate" : null), set_attribute(C, "aria-busy", get(f) ? !0 : null), set_attribute(C, "aria-label", o() ?? get(h)), te = set_class(R, 1, "bar svelte-1c2jqm2", null, te, { indeterminate: get(f) }), ne = set_style(R, "", ne, { width: get(f) ? null : `${get(u)}%` });
-	}), append(e, C), pop(S);
+	return if_block(G, (e) => {
+		a() && !get(p) && e(be);
+	}), reset(k), template_effect(() => {
+		set_class(k, 1, `container ${l() ?? "" ?? ""}`, "svelte-1c2jqm2"), set_attribute(k, "data-pw", typeof c() == "string" ? c() : null), set_attribute(k, "testid", typeof c() == "string" ? c() : null), set_attribute(k, "aria-valuenow", get(p) ? null : get(h)), set_attribute(k, "aria-valuetext", get(p) ? "indeterminate" : null), set_attribute(k, "aria-busy", get(p) ? !0 : null), set_attribute(k, "aria-label", s() ?? get(S)), ne = set_class(te, 1, "bar svelte-1c2jqm2", null, ne, { indeterminate: get(p) }), re = set_style(te, "", re, { width: get(p) ? null : `${get(f)}%` });
+	}), append(e, k), pop(C);
 }
 create_custom_element(Progress, {
 	value: {},
 	max: {},
 	showLabel: {},
+	animateValue: {},
 	ariaLabel: {},
 	testId: {},
 	classes: {}
@@ -11837,6 +12223,11 @@ customElements.define("sui-progress", create_custom_element(Progress_wc, {
 		reflect: !0,
 		type: "Boolean"
 	},
+	animateValue: {
+		attribute: "animate-value",
+		reflect: !0,
+		type: "Boolean"
+	},
 	testId: {
 		attribute: "test-id",
 		type: "String"
@@ -13709,7 +14100,7 @@ customElements.define("sui-stepper", create_custom_element(Stepper_wc, {
 //#region src/lib/assets/chevron-up.svg?raw
 var chevron_up_default = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <polyline points=\"18 15 12 9 6 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", chevron_down_default = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$72 = /* @__PURE__ */ from_html("<button class=\"tabs-arrow tabs-arrow-start svelte-18eaq6o\"><!></button>"), root_1$66 = /* @__PURE__ */ from_html("<div class=\"tabs-section-label svelte-18eaq6o\" aria-hidden=\"true\"> </div>"), root_2$52 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"></span>"), root_3$46 = /* @__PURE__ */ from_html("<!> <span class=\"tabs-item-label svelte-18eaq6o\"> </span> <!>", 1), root_4$39 = /* @__PURE__ */ from_html("<!> <div role=\"tab\"><!></div>", 1), root_5$34 = /* @__PURE__ */ from_html("<span class=\"tabs-indicator svelte-18eaq6o\" aria-hidden=\"true\"></span>"), root_6$29 = /* @__PURE__ */ from_html("<button class=\"tabs-arrow tabs-arrow-end svelte-18eaq6o\"><!></button>"), root_7$26 = /* @__PURE__ */ from_html("<div><!> <div role=\"tablist\"><!> <!></div> <!></div>"), $$css$132 = {
 	hash: "svelte-18eaq6o",
-	code: ".tabs-wrapper.svelte-18eaq6o {display:flex;align-items:stretch;position:relative;max-width:100%;background:var(--tabs-bar-background, #ffffff);border-bottom:var(--tabs-bar-border-bottom, 1px solid #e0e0e0);border-radius:var(--tabs-bar-border-radius, 0);}.tabs-wrapper.disabled.svelte-18eaq6o {opacity:var(--tabs-disabled-opacity, 0.5);pointer-events:none;}.tabs-bar.svelte-18eaq6o {display:flex;flex:1;min-width:0;padding:var(--tabs-bar-padding, 0px);gap:var(--tabs-bar-gap, 0px);overflow-x:auto;scrollbar-width:none;position:relative;}.tabs-bar.svelte-18eaq6o::-webkit-scrollbar {display:none;}\n\n  /* Each fade holds FULLY transparent for the first --tabs-fade-solid px before\n     ramping to opaque: a plain 0→fade-size ramp still renders the clipped tab\n     label at ~20% opacity a few px from the edge, which reads as a stray glyph\n     fragment beside the scroll arrow. The solid zone guarantees nothing is\n     perceptible there. */.tabs-bar.fade-left.svelte-18eaq6o {mask-image:linear-gradient(\n      to right,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );-webkit-mask-image:linear-gradient(\n      to right,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );}.tabs-bar.fade-right.svelte-18eaq6o {mask-image:linear-gradient(\n      to left,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );-webkit-mask-image:linear-gradient(\n      to left,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );}.tabs-bar.fade-left.fade-right.svelte-18eaq6o {mask-image:linear-gradient(\n      to right,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px),\n      black calc(100% - var(--tabs-fade-size, 32px)),\n      transparent calc(100% - var(--tabs-fade-solid, 8px))\n    );-webkit-mask-image:linear-gradient(\n      to right,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px),\n      black calc(100% - var(--tabs-fade-size, 32px)),\n      transparent calc(100% - var(--tabs-fade-solid, 8px))\n    );}.tabs-arrow.svelte-18eaq6o {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tabs-arrow-size, 28px);padding:var(--tabs-arrow-padding, 0);border:var(--tabs-arrow-border, none);background:var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff));color:var(--tabs-arrow-color, var(--tabs-item-color, #666666));cursor:pointer;z-index:1;transition:var(--tabs-arrow-transition, color 0.2s ease);font-family:inherit;}.tabs-arrow.svelte-18eaq6o:hover {color:var(--tabs-arrow-hover-color, var(--tabs-active-color, #0b57d0));background:var(\n      --tabs-arrow-hover-background,\n      var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff))\n    );}.tabs-item.svelte-18eaq6o {display:flex;align-items:center;gap:var(--tabs-item-gap, 8px);position:relative;padding:var(--tabs-item-padding, 12px 16px);font-size:var(--tabs-item-font-size, 14px);font-weight:var(--tabs-item-font-weight, 400);font-family:var(--tabs-item-font-family, inherit);color:var(--tabs-item-color, #666666);cursor:var(--tabs-item-cursor, pointer);background:var(--tabs-item-background, transparent);border:var(--tabs-item-border, none);border-radius:var(--tabs-item-border-radius, 0);outline:none;white-space:nowrap;flex-shrink:0;user-select:none;transition:var(--tabs-transition, color 0.2s ease, background 0.2s ease);}.tabs-item.svelte-18eaq6o .tabs-item-icon {--image-width: var(--tabs-item-icon-size, 16px);--image-height: var(--tabs-item-icon-size, 16px);--image-object-fit: contain;color:var(--tabs-item-icon-color, inherit);flex-shrink:0;}\n\n  /* Reserves the active-state (bolder) width of the label so selecting a tab\n     never reflows the tab bar: without this, .tabs-item.active's font-weight\n     jump makes the tab (and every tab after it) physically resize, which\n     visibly shifts sibling tabs and defeats the indicator's slide animation\n     with a jump. The ::after ghost renders data-text at the active weight\n     with height:0/visibility:hidden -- invisible, but its width still sets\n     the shrink-to-fit width of the inline-block label, so the box is already\n     as wide as the active state needs even while showing the lighter weight. */.tabs-item-label.svelte-18eaq6o {position:relative;display:inline-block;}.tabs-item-label.svelte-18eaq6o::after {content:attr(data-text);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:var(--tabs-active-font-weight, 600);}\n\n  /* Trailing status dot for nav/menu tabs. margin-left:auto pushes it to the row's\n     end (e.g. a settings menu); harmless on a normal tab bar where the item shrinks\n     to content. */.tabs-item-status.svelte-18eaq6o {width:var(--tabs-item-status-size, 8px);height:var(--tabs-item-status-size, 8px);margin-left:auto;border-radius:50%;flex-shrink:0;background:transparent;}\n\n  /* Neutral \"has activity / configured\" dot — blue by default, matching the app's\n     --text-color-focus. Maps from a settings menu's Default circle type. */.tabs-item-status.status-default.svelte-18eaq6o {background:var(--tabs-item-status-default-color, #1a73e8);}.tabs-item-status.status-pending.svelte-18eaq6o {background:var(--tabs-item-status-pending-color, #f59e0b);}.tabs-item-status.status-error.svelte-18eaq6o {background:var(--tabs-item-status-error-color, #e7000b);}.tabs-item-status.status-success.svelte-18eaq6o {background:var(--tabs-item-status-success-color, #16a34a);}.tabs-item.svelte-18eaq6o:hover:not(.active):not([aria-disabled]) {color:var(--tabs-hover-color, #333333);background:var(--tabs-hover-background, #f5f5f5);}.tabs-item.active.svelte-18eaq6o {color:var(--tabs-active-color, #0b57d0);font-weight:var(--tabs-active-font-weight, 600);background:var(--tabs-active-background, transparent);}.tabs-item[aria-disabled].svelte-18eaq6o {cursor:var(--tabs-disabled-cursor, not-allowed);}.tabs-indicator.svelte-18eaq6o {position:absolute;bottom:0;height:var(--tabs-indicator-height, 2px);background-color:var(--tabs-indicator-color, #1a73e8);border-radius:var(--tabs-indicator-border-radius, 2px 2px 0 0);transition:var(--tabs-indicator-transition, left 0.3s ease, width 0.3s ease);pointer-events:none;}\n\n  /* ---------- Vertical orientation (nav / menu rail) ---------- */.tabs-wrapper.vertical.svelte-18eaq6o {flex-direction:column;align-items:stretch;max-width:none;border-bottom:none;}.tabs-wrapper.vertical.svelte-18eaq6o .tabs-bar:where(.svelte-18eaq6o) {flex-direction:column;overflow-x:hidden;overflow-y:auto;}.tabs-wrapper.vertical.svelte-18eaq6o .tabs-item:where(.svelte-18eaq6o) {\n    /* Full-width rows: label sits at the leading edge, the status dot's margin-left:auto\n       pushes it to the trailing edge (the settings-menu look). */width:100%;box-sizing:border-box;justify-content:flex-start;}.tabs-bar.fade-top.svelte-18eaq6o {mask-image:linear-gradient(\n      to bottom,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );-webkit-mask-image:linear-gradient(\n      to bottom,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );}.tabs-bar.fade-bottom.svelte-18eaq6o {mask-image:linear-gradient(\n      to top,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );-webkit-mask-image:linear-gradient(\n      to top,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );}.tabs-bar.fade-top.fade-bottom.svelte-18eaq6o {mask-image:linear-gradient(\n      to bottom,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px),\n      black calc(100% - var(--tabs-fade-size, 32px)),\n      transparent calc(100% - var(--tabs-fade-solid, 8px))\n    );-webkit-mask-image:linear-gradient(\n      to bottom,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px),\n      black calc(100% - var(--tabs-fade-size, 32px)),\n      transparent calc(100% - var(--tabs-fade-solid, 8px))\n    );}.tabs-wrapper.vertical.svelte-18eaq6o .tabs-indicator:where(.svelte-18eaq6o) {top:0;bottom:auto;left:0;width:var(--tabs-indicator-height, 2px);height:var(--tabs-indicator-height, 2px);border-radius:var(--tabs-indicator-border-radius-vertical, 0 2px 2px 0);transition:var(--tabs-indicator-transition-vertical, top 0.3s ease, height 0.3s ease);}\n\n  /* Section header rendered above a group of vertical nav items. */.tabs-section-label.svelte-18eaq6o {padding:var(--tabs-section-label-padding, 12px 16px 4px);font-size:var(--tabs-section-label-font-size, 11px);font-weight:var(--tabs-section-label-font-weight, 700);letter-spacing:var(--tabs-section-label-letter-spacing, 0.04em);text-transform:var(--tabs-section-label-text-transform, uppercase);color:var(--tabs-section-label-color, var(--tabs-item-color, #666666));white-space:nowrap;user-select:none;}\n\n  @media (prefers-reduced-motion: reduce) {.tabs-indicator.svelte-18eaq6o,\n    .tabs-wrapper.vertical.svelte-18eaq6o .tabs-indicator:where(.svelte-18eaq6o) {transition:none;}\n  }"
+	code: ".tabs-wrapper.svelte-18eaq6o {display:flex;align-items:stretch;position:relative;max-width:100%;background:var(--tabs-bar-background, #ffffff);border-bottom:var(--tabs-bar-border-bottom, 1px solid #e0e0e0);border-radius:var(--tabs-bar-border-radius, 0);}.tabs-wrapper.disabled.svelte-18eaq6o {opacity:var(--tabs-disabled-opacity, 0.5);pointer-events:none;}.tabs-bar.svelte-18eaq6o {display:flex;flex:1;min-width:0;padding:var(--tabs-bar-padding, 0px);gap:var(--tabs-bar-gap, 0px);overflow-x:auto;scrollbar-width:none;position:relative;}.tabs-bar.svelte-18eaq6o::-webkit-scrollbar {display:none;}\n\n  /* Each fade holds FULLY transparent for the first --tabs-fade-solid px before\n     ramping to opaque: a plain 0→fade-size ramp still renders the clipped tab\n     label at ~20% opacity a few px from the edge, which reads as a stray glyph\n     fragment beside the scroll arrow. The solid zone guarantees nothing is\n     perceptible there. */.tabs-bar.fade-left.svelte-18eaq6o {mask-image:linear-gradient(\n      to right,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );-webkit-mask-image:linear-gradient(\n      to right,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );}.tabs-bar.fade-right.svelte-18eaq6o {mask-image:linear-gradient(\n      to left,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );-webkit-mask-image:linear-gradient(\n      to left,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );}.tabs-bar.fade-left.fade-right.svelte-18eaq6o {mask-image:linear-gradient(\n      to right,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px),\n      black calc(100% - var(--tabs-fade-size, 32px)),\n      transparent calc(100% - var(--tabs-fade-solid, 8px))\n    );-webkit-mask-image:linear-gradient(\n      to right,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px),\n      black calc(100% - var(--tabs-fade-size, 32px)),\n      transparent calc(100% - var(--tabs-fade-solid, 8px))\n    );}.tabs-arrow.svelte-18eaq6o {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tabs-arrow-size, 28px);padding:var(--tabs-arrow-padding, 0);border:var(--tabs-arrow-border, none);background:var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff));color:var(--tabs-arrow-color, var(--tabs-item-color, #666666));cursor:pointer;z-index:1;transition:var(--tabs-arrow-transition, color 0.2s ease);font-family:inherit;}.tabs-arrow.svelte-18eaq6o:hover {color:var(--tabs-arrow-hover-color, var(--tabs-active-color, #0b57d0));background:var(\n      --tabs-arrow-hover-background,\n      var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff))\n    );}.tabs-item.svelte-18eaq6o {display:flex;align-items:center;gap:var(--tabs-item-gap, 8px);position:relative;padding:var(--tabs-item-padding, 12px 16px);font-size:var(--tabs-item-font-size, 14px);font-weight:var(--tabs-item-font-weight, 400);font-family:var(--tabs-item-font-family, inherit);color:var(--tabs-item-color, #666666);cursor:var(--tabs-item-cursor, pointer);background:var(--tabs-item-background, transparent);border:var(--tabs-item-border, none);border-radius:var(--tabs-item-border-radius, 0);outline:none;white-space:nowrap;flex-shrink:0;user-select:none;transition:var(--tabs-transition, color 0.2s ease, background 0.2s ease);}\n\n  /* Roving focus really does move (see focusedKey/focusTabAt above) -- this\n     just replaces the INDICATOR that outline:none above strips, which is what\n     was actually missing (WCAG 2.4.7). :focus-visible only, so a mouse click\n     that activates a tab still shows nothing new, matching the rest of this\n     file's pattern (Sheet's .sheet-panel, Select's .select-clear, ...).\n     currentColor tracks --tabs-item-color / --tabs-active-color, which are\n     already themed per-mode and per-state, so the ring stays visible against\n     --tabs-bar-background in both themes with no extra token needed here. The\n     offset is inset, not the usual outward one: .tabs-bar is a same-axis\n     overflow:auto scroller with 0px padding/gap by default, so an outward ring\n     on an edge tab would be clipped by the scroll container's own edge. */.tabs-item.svelte-18eaq6o:focus-visible {outline:var(--tabs-item-focus-outline, 2px solid currentColor);outline-offset:var(--tabs-item-focus-outline-offset, -2px);}.tabs-item.svelte-18eaq6o .tabs-item-icon {--image-width: var(--tabs-item-icon-size, 16px);--image-height: var(--tabs-item-icon-size, 16px);--image-object-fit: contain;color:var(--tabs-item-icon-color, inherit);flex-shrink:0;}\n\n  /* Reserves the active-state (bolder) width of the label so selecting a tab\n     never reflows the tab bar: without this, .tabs-item.active's font-weight\n     jump makes the tab (and every tab after it) physically resize, which\n     visibly shifts sibling tabs and defeats the indicator's slide animation\n     with a jump. The ::after ghost renders data-text at the active weight\n     with height:0/visibility:hidden -- invisible, but its width still sets\n     the shrink-to-fit width of the inline-block label, so the box is already\n     as wide as the active state needs even while showing the lighter weight. */.tabs-item-label.svelte-18eaq6o {position:relative;display:inline-block;}.tabs-item-label.svelte-18eaq6o::after {content:attr(data-text);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:var(--tabs-active-font-weight, 600);}\n\n  /* Trailing status dot for nav/menu tabs. margin-left:auto pushes it to the row's\n     end (e.g. a settings menu); harmless on a normal tab bar where the item shrinks\n     to content. */.tabs-item-status.svelte-18eaq6o {width:var(--tabs-item-status-size, 8px);height:var(--tabs-item-status-size, 8px);margin-left:auto;border-radius:50%;flex-shrink:0;background:transparent;}\n\n  /* Neutral \"has activity / configured\" dot — blue by default, matching the app's\n     --text-color-focus. Maps from a settings menu's Default circle type. */.tabs-item-status.status-default.svelte-18eaq6o {background:var(--tabs-item-status-default-color, #1a73e8);}.tabs-item-status.status-pending.svelte-18eaq6o {background:var(--tabs-item-status-pending-color, #f59e0b);}.tabs-item-status.status-error.svelte-18eaq6o {background:var(--tabs-item-status-error-color, #e7000b);}.tabs-item-status.status-success.svelte-18eaq6o {background:var(--tabs-item-status-success-color, #16a34a);}.tabs-item.svelte-18eaq6o:hover:not(.active):not([aria-disabled]) {color:var(--tabs-hover-color, #333333);background:var(--tabs-hover-background, #f5f5f5);}.tabs-item.active.svelte-18eaq6o {color:var(--tabs-active-color, #0b57d0);font-weight:var(--tabs-active-font-weight, 600);background:var(--tabs-active-background, transparent);}.tabs-item[aria-disabled].svelte-18eaq6o {cursor:var(--tabs-disabled-cursor, not-allowed);}.tabs-indicator.svelte-18eaq6o {position:absolute;bottom:0;height:var(--tabs-indicator-height, 2px);background-color:var(--tabs-indicator-color, #1a73e8);border-radius:var(--tabs-indicator-border-radius, 2px 2px 0 0);transition:var(--tabs-indicator-transition, left 0.3s ease, width 0.3s ease);pointer-events:none;}\n\n  /* ---------- Vertical orientation (nav / menu rail) ---------- */.tabs-wrapper.vertical.svelte-18eaq6o {flex-direction:column;align-items:stretch;max-width:none;border-bottom:none;}.tabs-wrapper.vertical.svelte-18eaq6o .tabs-bar:where(.svelte-18eaq6o) {flex-direction:column;overflow-x:hidden;overflow-y:auto;}.tabs-wrapper.vertical.svelte-18eaq6o .tabs-item:where(.svelte-18eaq6o) {\n    /* Full-width rows: label sits at the leading edge, the status dot's margin-left:auto\n       pushes it to the trailing edge (the settings-menu look). */width:100%;box-sizing:border-box;justify-content:flex-start;}.tabs-bar.fade-top.svelte-18eaq6o {mask-image:linear-gradient(\n      to bottom,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );-webkit-mask-image:linear-gradient(\n      to bottom,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );}.tabs-bar.fade-bottom.svelte-18eaq6o {mask-image:linear-gradient(\n      to top,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );-webkit-mask-image:linear-gradient(\n      to top,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px)\n    );}.tabs-bar.fade-top.fade-bottom.svelte-18eaq6o {mask-image:linear-gradient(\n      to bottom,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px),\n      black calc(100% - var(--tabs-fade-size, 32px)),\n      transparent calc(100% - var(--tabs-fade-solid, 8px))\n    );-webkit-mask-image:linear-gradient(\n      to bottom,\n      transparent var(--tabs-fade-solid, 8px),\n      black var(--tabs-fade-size, 32px),\n      black calc(100% - var(--tabs-fade-size, 32px)),\n      transparent calc(100% - var(--tabs-fade-solid, 8px))\n    );}.tabs-wrapper.vertical.svelte-18eaq6o .tabs-indicator:where(.svelte-18eaq6o) {top:0;bottom:auto;left:0;width:var(--tabs-indicator-height, 2px);height:var(--tabs-indicator-height, 2px);border-radius:var(--tabs-indicator-border-radius-vertical, 0 2px 2px 0);transition:var(--tabs-indicator-transition-vertical, top 0.3s ease, height 0.3s ease);}\n\n  /* Section header rendered above a group of vertical nav items. */.tabs-section-label.svelte-18eaq6o {padding:var(--tabs-section-label-padding, 12px 16px 4px);font-size:var(--tabs-section-label-font-size, 11px);font-weight:var(--tabs-section-label-font-weight, 700);letter-spacing:var(--tabs-section-label-letter-spacing, 0.04em);text-transform:var(--tabs-section-label-text-transform, uppercase);color:var(--tabs-section-label-color, var(--tabs-item-color, #666666));white-space:nowrap;user-select:none;}\n\n  @media (prefers-reduced-motion: reduce) {.tabs-indicator.svelte-18eaq6o,\n    .tabs-wrapper.vertical.svelte-18eaq6o .tabs-indicator:where(.svelte-18eaq6o) {transition:none;}\n  }"
 };
 function Tabs(e, t) {
 	push(t, !0), append_styles$1(e, $$css$132);
@@ -14706,7 +15097,7 @@ customElements.define("sui-toggle", create_custom_element(Toggle_wc, {
 //#region src/lib/Accordion/Accordion.svelte
 var root$68 = /* @__PURE__ */ from_html("<div role=\"button\"><!></div>"), root_1$62 = /* @__PURE__ */ from_html("<!> <div><div class=\"accordion-content svelte-1p9ezsm\"><!></div></div>", 1), $$css$126 = {
 	hash: "svelte-1p9ezsm",
-	code: ".accordion-trigger.svelte-1p9ezsm {cursor:var(--accordion-trigger-cursor, pointer);}.accordion-trigger.disabled.svelte-1p9ezsm {cursor:var(--accordion-trigger-disabled-cursor, not-allowed);}.accordion.svelte-1p9ezsm {display:grid;grid-template-rows:0fr;overflow:hidden;\n    /* overflow: hidden drops this element's automatic minimum size to zero, so\n       when it is placed as an item of a consumer's own grid or flex container\n       it is otherwise free to be stretched down to whatever size that\n       container hands it -- as small as 0px -- independent of how tall its\n       own children actually are (issue #550). align-self: start opts the\n       panel out of that stretch so it always sizes from its own expanded\n       content instead. It is inert when the panel is not a grid or flex item,\n       and does not change the collapse animation: collapsed still resolves\n       to 0px either way.\n\n       Exposed as --accordion-align-self rather than hardcoded: Svelte's\n       scoped class raises .accordion's specificity above a plain utility\n       class passed through `classes`, so a consumer who legitimately wants\n       the panel stretched (or centered, etc.) could not otherwise override\n       this one declaration without reaching for :global() or !important. */align-self:var(--accordion-align-self, start);transition:grid-template-rows var(--accordion-transition, 0.2s ease-out);}.accordion.expanded.svelte-1p9ezsm {grid-template-rows:1fr;}.accordion-content.svelte-1p9ezsm {min-height:0;}"
+	code: ".accordion-trigger.svelte-1p9ezsm {cursor:var(--accordion-trigger-cursor, pointer);}.accordion-trigger.disabled.svelte-1p9ezsm {cursor:var(--accordion-trigger-disabled-cursor, not-allowed);}.accordion.svelte-1p9ezsm {display:grid;grid-template-rows:0fr;overflow:hidden;\n    /* overflow: hidden drops this element's automatic minimum size to zero, so\n       when it is placed as an item of a consumer's own grid or flex container\n       it is otherwise free to be stretched down to whatever size that\n       container hands it -- as small as 0px -- independent of how tall its\n       own children actually are (issue #550). align-self: start opts the\n       panel out of that stretch so it always sizes from its own expanded\n       content instead. It is inert when the panel is not a grid or flex item,\n       and does not change the collapse animation: collapsed still resolves\n       to 0px either way.\n\n       Exposed as --accordion-align-self rather than hardcoded: Svelte's\n       scoped class raises .accordion's specificity above a plain utility\n       class passed through `classes`, so a consumer who legitimately wants\n       the panel stretched (or centered, etc.) could not otherwise override\n       this one declaration without reaching for :global() or !important. */align-self:var(--accordion-align-self, start);transition:grid-template-rows var(--accordion-transition, 0.2s ease-out);}.accordion.expanded.svelte-1p9ezsm {grid-template-rows:1fr;}\n\n  /* The expand/collapse is a real size change, which is what the preference is\n     about, and nothing was stopping it: DESIGN_PRINCIPLES.md section 1 reasons a\n     finite transition needs no guard because --motion-duration handles it, but\n     this rule reads --accordion-transition, and no stylesheet in this library\n     assigns either token -- both exist purely as fallback rungs for a consumer to\n     reach. Safe to drop outright because the transition is finite: the panel\n     lands open or closed rather than stranded part-way, unlike an indefinite\n     animation collapsed onto its 0% keyframe.\n\n     Declared on `.accordion` to match the base rule's specificity and placed\n     after it, so it wins; `.accordion.expanded` sets only grid-template-rows and\n     never re-declares the transition, so it cannot silently override this. */\n  @media (prefers-reduced-motion: reduce) {.accordion.svelte-1p9ezsm {transition:none;}\n  }.accordion-content.svelte-1p9ezsm {min-height:0;}"
 };
 function Accordion(e, t) {
 	let n = props_id();
@@ -17398,48 +17789,68 @@ customElements.define("sui-input-button", create_custom_element(InputButton_wc,
 	}
 }, ["left-icon", "right-icon"], [], { mode: "open" }));
 //#endregion
+//#region src/lib/ListItem/label.ts
+function escapeHtml$1(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function runSanitizer$1(e, t) {
+	try {
+		let n = t(e);
+		return typeof n == "string" ? n : null;
+	} catch {
+		return null;
+	}
+}
+function resolveLabelHtml(e, t) {
+	if (t?.rawHtml === "sanitize" && typeof t.htmlSanitizer == "function") {
+		let n = runSanitizer$1(e, t.htmlSanitizer);
+		if (n !== null) return n;
+	}
+	return escapeHtml$1(e);
+}
+//#endregion
 //#region src/lib/ListItem/ListItem.svelte
 var root$55 = /* @__PURE__ */ from_html("<div class=\"item-loader svelte-d2pqbq\"></div>"), root_1$52 = /* @__PURE__ */ from_html("<div><!></div>"), root_2$41 = /* @__PURE__ */ from_html("<div></div>"), root_3$37 = /* @__PURE__ */ from_html("<div><div class=\"right-img-wrapper svelte-d2pqbq\"><!></div></div>"), root_4$32 = /* @__PURE__ */ from_html("<div class=\"right-content-loader svelte-d2pqbq\"><!></div>"), root_5$29 = /* @__PURE__ */ from_html("<span class=\"right-content-text svelte-d2pqbq\"> </span>"), root_6$26 = /* @__PURE__ */ from_html("<div><!> <div><div><div class=\"left-content svelte-d2pqbq\"><!> <!></div> <div class=\"center-content svelte-d2pqbq\"><!> <!></div> <div class=\"right-content svelte-d2pqbq\"><!> <!> <!> <!></div></div> <div class=\"bottom-section svelte-d2pqbq\"><!></div></div></div>"), $$css$105 = {
 	hash: "svelte-d2pqbq",
-	code: ".item-container.svelte-d2pqbq {position:relative;--loader-foreground: var(--list-item-loader-foreground, #86898d);--loader-background: var(--list-item-loader-background, #ffffff);--loader-foreground-end: var(--list-item-loader-foreground-end, #ffffff);}.item-loader.svelte-d2pqbq {position:absolute;height:100%;width:100%;background:var(--list-item-loader-background-color, #00000030);z-index:20;\n    animation: svelte-d2pqbq-fill-loader ease-in-out var(--list-item-loader-duration, 8s);}\n\n  @keyframes svelte-d2pqbq-fill-loader {\n    0% {\n      width: 0;\n    }\n\n    100% {\n      width: 100%;\n    }\n  }\n\n  /* Same hazard as Button's progress-bar loader (see its comment for the full\n     reasoning): this bar's width is a real elapsed-time signal over\n     `--list-item-loader-duration`, not decoration, so a bare `animation: none`\n     would freeze it at the base rule's `width: 100%` and read as \"finished\"\n     for the entire duration instead of \"still loading\". Discrete steps keep\n     the width an honest (if coarser) lower bound on elapsed time -- it can\n     only under-report, never claim to be further along than it is -- while\n     dropping the continuous slide prefers-reduced-motion targets. Lives in\n     the component's own <style> because that is the only stylesheet that\n     reaches inside the shadow root a custom-element consumer gets. */\n  @media (prefers-reduced-motion: reduce) {.item-loader.svelte-d2pqbq {\n      /* A LITERAL step count, deliberately not a token. `steps()` is invalid\n         below 1, and an invalid value does not degrade to a safer stepped\n         default: the whole declaration is dropped and the property falls back to\n         the base rule's easing, restoring the continuous slide this block exists\n         to remove. A consumer passing 0 to \"just freeze it\" would silently\n         switch the guard off for every user who asked for reduced motion, and a\n         guard that fails OPEN without saying so is worse than no guard. */animation-timing-function:steps(5, jump-end);}\n  }.item.svelte-d2pqbq {display:flex;flex-direction:column;background-color:var(--list-item-background-color, transparent);-webkit-tap-highlight-color:transparent;cursor:var(--list-item-cursor, pointer);-moz-box-shadow:var(--list-item-box-shadow, none);-webkit-box-shadow:var(--list-item-box-shadow, none);box-shadow:var(--list-item-box-shadow, none);width:var(--list-item-box-width);border-radius:var(--list-item-border-radius, 0px);margin:var(--list-item-margin);padding:var(--list-item-padding);border:var(--list-item-border);transition:var(--list-item-transition);}.item.svelte-d2pqbq:hover {background-color:var(--list-item-hover-background-color, var(--list-item-background-color));border:var(--list-item-hover-border, var(--list-item-border));}.top-section.svelte-d2pqbq {display:flex;flex-direction:row;align-items:var(--list-item-top-section-align-items);gap:var(--list-item-top-section-gap);margin-bottom:0;}.left-content.svelte-d2pqbq {display:var(--list-item-left-content-display, flex);--image-height: var(--list-item-left-image-height, 24px);--image-width: var(--list-item-left-image-width, 24px);--image-padding: var(--list-item-left-image-padding, 0px);--image-border-radius: var(--list-item-left-image-border-radius, 0px);--image-margin: var(--list-item-left-image-margin, 0px);--image-filter: var(--list-item-left-image-filter, none);--image-background: var(--list-item-left-image-background);--image-border: var(--list-item-left-image-border);--image-transition: var(--list-item-transition);--image-object-fit: var(--list-item-left-image-object-fit);--image-hover-background: var(\n      --list-item-left-image-hover-background,\n      var(--list-item-left-image-background)\n    );--image-hover-border: var(\n      --list-item-left-image-hover-border,\n      var(--list-item-left-image-border)\n    );}.center-text.svelte-d2pqbq {display:flex;flex-direction:column;justify-content:var(--list-item-center-text-justify-content, flex-start);padding:var(--list-item-center-text-padding, 0px 20px);color:var(--list-item-center-text-color, #2f3841);font-size:var(--list-item-center-text-font-size, 12px);font-weight:var(--list-item-center-text-font-weight, 300);align-items:var(--list-item-center-text-vertical-align);margin:var(--list-item-center-text-margin);border:var(--list-item-center-text-border);cursor:var(--list-item-center-text-cursor, pointer);font-family:var(--list-item-center-text-font-family, inherit);}.center-content.svelte-d2pqbq {display:flex;flex:1;min-width:0;}.right-content.svelte-d2pqbq {display:var(--list-item-right-content-display, flex);flex:var(--list-item-right-content-flex);}.right-content-loader.svelte-d2pqbq {margin:var(--list-item-right-content-loader-margin);}.bottom-section.svelte-d2pqbq {flex-direction:row;margin-top:0;}.right-img-wrapper.svelte-d2pqbq {--image-height: var(--list-item-right-image-height, 18px);--image-width: var(--list-item-right-image-width, 18px);--image-padding: var(--list-item-right-image-padding, 0px);--image-border-radius: var(--list-item-right-image-border-radius, 0px);--image-margin: var(--list-item-right-image-margin, 0px);--image-filter: var(--list-item-right-image-filter);--image-background: var(--list-item-right-image-background);--image-border: var(--list-item-right-image-border);--image-transition: var(--list-item-transition);--image-hover-background: var(\n      --list-item-right-image-hover-background,\n      var(--list-item-right-image-background)\n    );--image-hover-border: var(\n      --list-item-right-image-hover-border,\n      var(--list-item-right-image-border)\n    );}.right-content-text.svelte-d2pqbq {color:var(--list-item-right-content-text-color, #2f3841);font-size:var(--list-item-right-content-text-font-size, 12px);font-weight:var(--list-item-right-content-text-font-weight, 300);display:var(--list-item-right-content-display, flex);align-items:var(--list-item-right-content-text-vertical-align);padding:var(--list-item-right-content-text-padding, 0px);margin:var(--list-item-right-content-text-margin, 0px);border:var(--list-item-right-content-text-border);cursor:var(--list-item-right-content-text-cursor, pointer);font-family:var(--list-item-right-content-text-font-family, inherit);justify-content:var(--list-item-right-content-text-justify-content);}.prevent-focus.svelte-d2pqbq:focus {outline:none;}\n  /* The loader is not the only motion in this file, and this block sits at the\n     END on purpose: `.item` is declared after the guard above, so an override\n     placed there would lose the same-specificity tie on source order -- the\n     cascade trap BrandLoader's own guard had to account for.\n     `--image-transition` is not a transition on this element at all; it is a\n     custom property handed DOWN to the Img child, and a custom property is the\n     only thing that crosses that boundary. Setting `transition: none` here would\n     never reach the image, so the property itself is neutralised. */\n  @media (prefers-reduced-motion: reduce) {.item.svelte-d2pqbq {transition:none;}.left-content.svelte-d2pqbq,\n    .right-img-wrapper.svelte-d2pqbq {--image-transition: none;}\n  }"
+	code: ".item-container.svelte-d2pqbq {position:relative;--loader-foreground: var(--list-item-loader-foreground, #86898d);--loader-background: var(--list-item-loader-background, #ffffff);--loader-foreground-end: var(--list-item-loader-foreground-end, #ffffff);}.item-loader.svelte-d2pqbq {position:absolute;height:100%;width:100%;background:var(--list-item-loader-background-color, #00000030);z-index:20;\n    animation: svelte-d2pqbq-fill-loader ease-in-out var(--list-item-loader-duration, 8s);}\n\n  @keyframes svelte-d2pqbq-fill-loader {\n    0% {\n      width: 0;\n    }\n\n    100% {\n      width: 100%;\n    }\n  }\n\n  /* Same hazard as Button's progress-bar loader (see its comment for the full\n     reasoning): this bar's width is a real elapsed-time signal over\n     `--list-item-loader-duration`, not decoration, so a bare `animation: none`\n     would freeze it at the base rule's `width: 100%` and read as \"finished\"\n     for the entire duration instead of \"still loading\". Discrete steps keep\n     the width an honest (if coarser) lower bound on elapsed time -- it can\n     only under-report, never claim to be further along than it is -- while\n     dropping the continuous slide prefers-reduced-motion targets. Lives in\n     the component's own <style> because that is the only stylesheet that\n     reaches inside the shadow root a custom-element consumer gets. */\n  @media (prefers-reduced-motion: reduce) {.item-loader.svelte-d2pqbq {\n      /* A LITERAL step count, deliberately not a token. `steps()` is invalid\n         below 1, and an invalid value does not degrade to a safer stepped\n         default: the whole declaration is dropped and the property falls back to\n         the base rule's easing, restoring the continuous slide this block exists\n         to remove. A consumer passing 0 to \"just freeze it\" would silently\n         switch the guard off for every user who asked for reduced motion, and a\n         guard that fails OPEN without saying so is worse than no guard. */animation-timing-function:steps(5, jump-end);}\n  }.item.svelte-d2pqbq {display:flex;flex-direction:column;background-color:var(--list-item-background-color, transparent);-webkit-tap-highlight-color:transparent;cursor:var(--list-item-cursor, pointer);-moz-box-shadow:var(--list-item-box-shadow, none);-webkit-box-shadow:var(--list-item-box-shadow, none);box-shadow:var(--list-item-box-shadow, none);width:var(--list-item-box-width);border-radius:var(--list-item-border-radius, 0px);margin:var(--list-item-margin);padding:var(--list-item-padding);border:var(--list-item-border);transition:var(--list-item-transition);}.item.svelte-d2pqbq:hover {background-color:var(--list-item-hover-background-color, var(--list-item-background-color));border:var(--list-item-hover-border, var(--list-item-border));}.top-section.svelte-d2pqbq {display:flex;flex-direction:row;align-items:var(--list-item-top-section-align-items);gap:var(--list-item-top-section-gap);margin-bottom:0;}.left-content.svelte-d2pqbq {display:var(--list-item-left-content-display, flex);--image-height: var(--list-item-left-image-height, 24px);--image-width: var(--list-item-left-image-width, 24px);--image-padding: var(--list-item-left-image-padding, 0px);--image-border-radius: var(--list-item-left-image-border-radius, 0px);--image-margin: var(--list-item-left-image-margin, 0px);--image-filter: var(--list-item-left-image-filter, none);--image-background: var(--list-item-left-image-background);--image-border: var(--list-item-left-image-border);--image-transition: var(--list-item-transition);--image-object-fit: var(--list-item-left-image-object-fit);--image-hover-background: var(\n      --list-item-left-image-hover-background,\n      var(--list-item-left-image-background)\n    );--image-hover-border: var(\n      --list-item-left-image-hover-border,\n      var(--list-item-left-image-border)\n    );}.center-text.svelte-d2pqbq {display:flex;flex-direction:column;justify-content:var(--list-item-center-text-justify-content, flex-start);padding:var(--list-item-center-text-padding, 0px 20px);color:var(--list-item-center-text-color, #2f3841);font-size:var(--list-item-center-text-font-size, 12px);font-weight:var(--list-item-center-text-font-weight, 300);align-items:var(--list-item-center-text-vertical-align);margin:var(--list-item-center-text-margin);border:var(--list-item-center-text-border);cursor:var(--list-item-center-text-cursor, pointer);font-family:var(--list-item-center-text-font-family, inherit);}.center-content.svelte-d2pqbq {display:flex;flex:1;min-width:0;}.right-content.svelte-d2pqbq {display:var(--list-item-right-content-display, flex);flex:var(--list-item-right-content-flex);}.right-content-loader.svelte-d2pqbq {margin:var(--list-item-right-content-loader-margin);}.bottom-section.svelte-d2pqbq {flex-direction:row;margin-top:0;}.right-img-wrapper.svelte-d2pqbq {--image-height: var(--list-item-right-image-height, 18px);--image-width: var(--list-item-right-image-width, 18px);--image-padding: var(--list-item-right-image-padding, 0px);--image-border-radius: var(--list-item-right-image-border-radius, 0px);--image-margin: var(--list-item-right-image-margin, 0px);--image-filter: var(--list-item-right-image-filter);--image-background: var(--list-item-right-image-background);--image-border: var(--list-item-right-image-border);--image-transition: var(--list-item-transition);--image-hover-background: var(\n      --list-item-right-image-hover-background,\n      var(--list-item-right-image-background)\n    );--image-hover-border: var(\n      --list-item-right-image-hover-border,\n      var(--list-item-right-image-border)\n    );}.right-content-text.svelte-d2pqbq {color:var(--list-item-right-content-text-color, #2f3841);font-size:var(--list-item-right-content-text-font-size, 12px);font-weight:var(--list-item-right-content-text-font-weight, 300);display:var(--list-item-right-content-display, flex);align-items:var(--list-item-right-content-text-vertical-align);padding:var(--list-item-right-content-text-padding, 0px);margin:var(--list-item-right-content-text-margin, 0px);border:var(--list-item-right-content-text-border);cursor:var(--list-item-right-content-text-cursor, pointer);font-family:var(--list-item-right-content-text-font-family, inherit);justify-content:var(--list-item-right-content-text-justify-content);}.prevent-focus.svelte-d2pqbq:focus {outline:none;}\n\n  /* preventFocus does not touch tabindex (see the root's tabindex expression\n     above -- itemRole/suppressRoleAndTabindex govern that, unconditional on\n     this prop), so every element carrying .prevent-focus stays a real,\n     keyboard-Tab-reachable stop by default. docs/ListItem.md documents the\n     prop as removing the outline \"for non-keyboard navigation contexts\" --\n     :focus-visible is that exact distinction already built into the\n     platform: it does not match a mouse/touch-triggered focus (the case the\n     prop exists for) but does match a real keyboard Tab, so this restores\n     WCAG 2.4.7 visibility for the one case preventFocus was never meant to\n     hide it from. */.prevent-focus.svelte-d2pqbq:focus-visible {outline:var(--list-item-focus-outline, 2px solid #2563eb);outline-offset:var(--list-item-focus-outline-offset, -2px);}\n  /* The loader is not the only motion in this file, and this block sits at the\n     END on purpose: `.item` is declared after the guard above, so an override\n     placed there would lose the same-specificity tie on source order -- the\n     cascade trap BrandLoader's own guard had to account for.\n     `--image-transition` is not a transition on this element at all; it is a\n     custom property handed DOWN to the Img child, and a custom property is the\n     only thing that crosses that boundary. Setting `transition: none` here would\n     never reach the image, so the property itself is neutralised. */\n  @media (prefers-reduced-motion: reduce) {.item.svelte-d2pqbq {transition:none;}.left-content.svelte-d2pqbq,\n    .right-img-wrapper.svelte-d2pqbq {--image-transition: none;}\n  }"
 };
 function ListItem(e, t) {
 	push(t, !0), append_styles$1(e, $$css$105);
-	let n = prop(t, "leftImageUrl", 7), i = prop(t, "leftImageFallbackUrl", 7), a = prop(t, "rightImageUrl", 7), o = prop(t, "label", 7), s = prop(t, "useAccordion", 7, !1), c = prop(t, "rightContentText", 7), l = prop(t, "testId", 7), u = prop(t, "topSectionTestId", 7), f = prop(t, "rightImageTestId", 7), p = prop(t, "leftImageTestId", 7), h = prop(t, "centerTextTestId", 7), S = prop(t, "showLoader", 7, !1), C = prop(t, "showRightContentLoader", 7, !1), k = prop(t, "expand", 15, !1), R = prop(t, "preventFocus", 7, !1), te = prop(t, "suppressRoleAndTabindex", 7, !1), ne = prop(t, "leftContent", 7), re = prop(t, "centerContent", 7), G = prop(t, "rightContent", 7), be = prop(t, "bottomContent", 7), Me = prop(t, "onleftimageclick", 7), Re = prop(t, "onrightimageclick", 7), Ue = prop(t, "oncentertextclick", 7), it = prop(t, "onitemclick", 7), at = prop(t, "ontopsectionclick", 7), ot = prop(t, "onkeydown", 7), ct = prop(t, "classes", 7), lt = prop(t, "transformSvg", 7), ut = prop(t, "role", 7), dt = prop(t, "ariaSelected", 7), ft = prop(t, "id", 7), pt = /* @__PURE__ */ user_derived(() => !te() && typeof at() == "function"), mt = /* @__PURE__ */ user_derived(() => !te() && typeof Me() == "function"), ht = /* @__PURE__ */ user_derived(() => !te() && typeof Ue() == "function"), gt = /* @__PURE__ */ user_derived(() => !te() && typeof Re() == "function"), _t = /* @__PURE__ */ user_derived(() => !te() && ut() !== "option");
-	function vt(e) {
-		Me()?.(e);
-	}
-	function yt(e) {
+	let n = prop(t, "leftImageUrl", 7), i = prop(t, "leftImageFallbackUrl", 7), a = prop(t, "rightImageUrl", 7), o = prop(t, "label", 7), s = prop(t, "sanitize", 7), c = prop(t, "useAccordion", 7, !1), l = prop(t, "rightContentText", 7), u = prop(t, "testId", 7), f = prop(t, "topSectionTestId", 7), p = prop(t, "rightImageTestId", 7), h = prop(t, "leftImageTestId", 7), S = prop(t, "centerTextTestId", 7), C = prop(t, "showLoader", 7, !1), k = prop(t, "showRightContentLoader", 7, !1), R = prop(t, "expand", 15, !1), te = prop(t, "preventFocus", 7, !1), ne = prop(t, "suppressRoleAndTabindex", 7, !1), re = prop(t, "leftContent", 7), G = prop(t, "centerContent", 7), be = prop(t, "rightContent", 7), Me = prop(t, "bottomContent", 7), Re = prop(t, "onleftimageclick", 7), Ue = prop(t, "onrightimageclick", 7), it = prop(t, "oncentertextclick", 7), at = prop(t, "onitemclick", 7), ot = prop(t, "ontopsectionclick", 7), ct = prop(t, "onkeydown", 7), lt = prop(t, "classes", 7), ut = prop(t, "transformSvg", 7), dt = prop(t, "role", 7), ft = prop(t, "ariaSelected", 7), pt = prop(t, "id", 7), mt = /* @__PURE__ */ user_derived(() => !ne() && typeof ot() == "function"), ht = /* @__PURE__ */ user_derived(() => !ne() && typeof Re() == "function"), gt = /* @__PURE__ */ user_derived(() => !ne() && typeof it() == "function"), _t = /* @__PURE__ */ user_derived(() => !ne() && typeof Ue() == "function"), vt = /* @__PURE__ */ user_derived(() => !ne() && dt() !== "option"), yt = /* @__PURE__ */ user_derived(() => typeof o() == "string" ? resolveLabelHtml(o(), s()) : "");
+	function bt(e) {
 		Re()?.(e);
 	}
-	function bt(e) {
+	function xt(e) {
 		Ue()?.(e);
 	}
-	function xt(e) {
+	function St(e) {
 		it()?.(e);
 	}
-	function St(e) {
+	function Ct(e) {
 		at()?.(e);
 	}
-	function Ct(e, t) {
-		ot()?.(t), !(!e || t.target !== t.currentTarget) && (t.key !== "Enter" && t.key !== " " || (t.preventDefault(), t.currentTarget instanceof HTMLElement && t.currentTarget.click()));
-	}
 	function wt(e) {
-		Ct(get(_t), e);
+		ot()?.(e);
 	}
-	function Tt(e) {
-		Ct(get(pt), e);
+	function Tt(e, t) {
+		ct()?.(t), !(!e || t.target !== t.currentTarget) && (t.key !== "Enter" && t.key !== " " || (t.preventDefault(), t.currentTarget instanceof HTMLElement && t.currentTarget.click()));
 	}
 	function Et(e) {
-		Ct(get(mt), e);
+		Tt(get(vt), e);
 	}
 	function Dt(e) {
-		Ct(get(ht), e);
+		Tt(get(mt), e);
 	}
 	function Ot(e) {
-		Ct(get(gt), e);
+		Tt(get(ht), e);
 	}
-	var kt = {
+	function kt(e) {
+		Tt(get(gt), e);
+	}
+	function At(e) {
+		Tt(get(_t), e);
+	}
+	var jt = {
 		get leftImageUrl() {
 			return n();
 		},
@@ -17464,180 +17875,186 @@ function ListItem(e, t) {
 		set label(e) {
 			o(e), flushSync();
 		},
-		get useAccordion() {
+		get sanitize() {
 			return s();
 		},
-		set useAccordion(e = !1) {
+		set sanitize(e) {
 			s(e), flushSync();
 		},
-		get rightContentText() {
+		get useAccordion() {
 			return c();
 		},
-		set rightContentText(e) {
+		set useAccordion(e = !1) {
 			c(e), flushSync();
 		},
-		get testId() {
+		get rightContentText() {
 			return l();
 		},
-		set testId(e) {
+		set rightContentText(e) {
 			l(e), flushSync();
 		},
-		get topSectionTestId() {
+		get testId() {
 			return u();
 		},
-		set topSectionTestId(e) {
+		set testId(e) {
 			u(e), flushSync();
 		},
-		get rightImageTestId() {
+		get topSectionTestId() {
 			return f();
 		},
-		set rightImageTestId(e) {
+		set topSectionTestId(e) {
 			f(e), flushSync();
 		},
-		get leftImageTestId() {
+		get rightImageTestId() {
 			return p();
 		},
-		set leftImageTestId(e) {
+		set rightImageTestId(e) {
 			p(e), flushSync();
 		},
-		get centerTextTestId() {
+		get leftImageTestId() {
 			return h();
 		},
-		set centerTextTestId(e) {
+		set leftImageTestId(e) {
 			h(e), flushSync();
 		},
-		get showLoader() {
+		get centerTextTestId() {
 			return S();
 		},
-		set showLoader(e = !1) {
+		set centerTextTestId(e) {
 			S(e), flushSync();
 		},
-		get showRightContentLoader() {
+		get showLoader() {
 			return C();
 		},
-		set showRightContentLoader(e = !1) {
+		set showLoader(e = !1) {
 			C(e), flushSync();
 		},
-		get expand() {
+		get showRightContentLoader() {
 			return k();
 		},
-		set expand(e = !1) {
+		set showRightContentLoader(e = !1) {
 			k(e), flushSync();
 		},
-		get preventFocus() {
+		get expand() {
 			return R();
 		},
-		set preventFocus(e = !1) {
+		set expand(e = !1) {
 			R(e), flushSync();
 		},
-		get suppressRoleAndTabindex() {
+		get preventFocus() {
 			return te();
 		},
-		set suppressRoleAndTabindex(e = !1) {
+		set preventFocus(e = !1) {
 			te(e), flushSync();
 		},
-		get leftContent() {
+		get suppressRoleAndTabindex() {
 			return ne();
 		},
-		set leftContent(e) {
+		set suppressRoleAndTabindex(e = !1) {
 			ne(e), flushSync();
 		},
-		get centerContent() {
+		get leftContent() {
 			return re();
 		},
-		set centerContent(e) {
+		set leftContent(e) {
 			re(e), flushSync();
 		},
-		get rightContent() {
+		get centerContent() {
 			return G();
 		},
-		set rightContent(e) {
+		set centerContent(e) {
 			G(e), flushSync();
 		},
-		get bottomContent() {
+		get rightContent() {
 			return be();
 		},
-		set bottomContent(e) {
+		set rightContent(e) {
 			be(e), flushSync();
 		},
-		get onleftimageclick() {
+		get bottomContent() {
 			return Me();
 		},
-		set onleftimageclick(e) {
+		set bottomContent(e) {
 			Me(e), flushSync();
 		},
-		get onrightimageclick() {
+		get onleftimageclick() {
 			return Re();
 		},
-		set onrightimageclick(e) {
+		set onleftimageclick(e) {
 			Re(e), flushSync();
 		},
-		get oncentertextclick() {
+		get onrightimageclick() {
 			return Ue();
 		},
-		set oncentertextclick(e) {
+		set onrightimageclick(e) {
 			Ue(e), flushSync();
 		},
-		get onitemclick() {
+		get oncentertextclick() {
 			return it();
 		},
-		set onitemclick(e) {
+		set oncentertextclick(e) {
 			it(e), flushSync();
 		},
-		get ontopsectionclick() {
+		get onitemclick() {
 			return at();
 		},
-		set ontopsectionclick(e) {
+		set onitemclick(e) {
 			at(e), flushSync();
 		},
-		get onkeydown() {
+		get ontopsectionclick() {
 			return ot();
 		},
-		set onkeydown(e) {
+		set ontopsectionclick(e) {
 			ot(e), flushSync();
 		},
-		get classes() {
+		get onkeydown() {
 			return ct();
 		},
-		set classes(e) {
+		set onkeydown(e) {
 			ct(e), flushSync();
 		},
-		get transformSvg() {
+		get classes() {
 			return lt();
 		},
-		set transformSvg(e) {
+		set classes(e) {
 			lt(e), flushSync();
 		},
-		get role() {
+		get transformSvg() {
 			return ut();
 		},
-		set role(e) {
+		set transformSvg(e) {
 			ut(e), flushSync();
 		},
-		get ariaSelected() {
+		get role() {
 			return dt();
 		},
-		set ariaSelected(e) {
+		set role(e) {
 			dt(e), flushSync();
 		},
-		get id() {
+		get ariaSelected() {
 			return ft();
 		},
-		set id(e) {
+		set ariaSelected(e) {
 			ft(e), flushSync();
+		},
+		get id() {
+			return pt();
+		},
+		set id(e) {
+			pt(e), flushSync();
 		}
-	}, At = comment(), jt = first_child(At), Mt = (e) => {
-		var t = root_6$26(), Me = child(t), Re = (e) => {
+	}, Mt = comment(), Nt = first_child(Mt), Pt = (e) => {
+		var t = root_6$26(), s = child(t), Re = (e) => {
 			append(e, root$55());
 		};
-		if_block(Me, (e) => {
-			S() && e(Re);
+		if_block(s, (e) => {
+			C() && e(Re);
 		});
-		var Ue = sibling(Me, 2);
+		var Ue = sibling(s, 2);
 		let it;
 		var at = child(Ue);
 		let ot;
-		var _t = child(at), Ct = child(_t), kt = (e) => {
+		var ct = child(at), vt = child(ct), Tt = (e) => {
 			var t = root_1$52();
 			let a;
 			Img(child(t), {
@@ -17649,47 +18066,47 @@ function ListItem(e, t) {
 					return i();
 				},
 				get transformSvg() {
-					return lt();
+					return ut();
 				}
 			}), reset(t), template_effect(() => {
-				set_attribute(t, "role", get(mt) ? "button" : null), set_attribute(t, "tabindex", get(mt) ? 0 : null), set_attribute(t, "data-pw", p()), set_attribute(t, "testid", p()), a = set_class(t, 1, "svelte-d2pqbq", null, a, { "prevent-focus": R() });
-			}), delegated("click", t, vt), delegated("keydown", t, Et), append(e, t);
+				set_attribute(t, "role", get(ht) ? "button" : null), set_attribute(t, "tabindex", get(ht) ? 0 : null), set_attribute(t, "data-pw", h()), set_attribute(t, "testid", h()), a = set_class(t, 1, "svelte-d2pqbq", null, a, { "prevent-focus": te() });
+			}), delegated("click", t, bt), delegated("keydown", t, Ot), append(e, t);
 		};
-		if_block(Ct, (e) => {
-			typeof n() == "string" && n().length > 0 && e(kt);
+		if_block(vt, (e) => {
+			typeof n() == "string" && n().length > 0 && e(Tt);
 		});
-		var At = sibling(Ct, 2), jt = (e) => {
+		var jt = sibling(vt, 2), Mt = (e) => {
 			var t = comment();
-			snippet(first_child(t), () => ne() ?? noop), append(e, t);
+			snippet(first_child(t), () => re() ?? noop), append(e, t);
 		};
-		if_block(At, (e) => {
-			typeof ne() == "function" && e(jt);
-		}), reset(_t);
-		var Mt = sibling(_t, 2), Nt = child(Mt), Pt = (e) => {
+		if_block(jt, (e) => {
+			typeof re() == "function" && e(Mt);
+		}), reset(ct);
+		var Nt = sibling(ct, 2), Pt = child(Nt), It = (e) => {
 			var t = root_2$41();
 			let n;
-			html(t, o, !0), reset(t), template_effect(() => {
-				n = set_class(t, 1, "center-text svelte-d2pqbq", null, n, { "prevent-focus": R() }), set_attribute(t, "role", get(ht) ? "button" : null), set_attribute(t, "tabindex", get(ht) ? 0 : null), set_attribute(t, "data-pw", h()), set_attribute(t, "testid", h());
-			}), delegated("click", t, bt), delegated("keydown", t, Dt), append(e, t);
+			html(t, () => get(yt), !0), reset(t), template_effect(() => {
+				n = set_class(t, 1, "center-text svelte-d2pqbq", null, n, { "prevent-focus": te() }), set_attribute(t, "role", get(gt) ? "button" : null), set_attribute(t, "tabindex", get(gt) ? 0 : null), set_attribute(t, "data-pw", S()), set_attribute(t, "testid", S());
+			}), delegated("click", t, St), delegated("keydown", t, kt), append(e, t);
 		};
-		if_block(Nt, (e) => {
-			typeof o() == "string" && o().length > 0 && e(Pt);
+		if_block(Pt, (e) => {
+			typeof o() == "string" && o().length > 0 && e(It);
 		});
-		var It = sibling(Nt, 2), Lt = (e) => {
+		var Lt = sibling(Pt, 2), Rt = (e) => {
 			var t = comment();
-			snippet(first_child(t), () => re() ?? noop), append(e, t);
+			snippet(first_child(t), () => G() ?? noop), append(e, t);
 		};
-		if_block(It, (e) => {
-			typeof re() == "function" && e(Lt);
-		}), reset(Mt);
-		var Rt = sibling(Mt, 2), zt = child(Rt), Bt = (e) => {
+		if_block(Lt, (e) => {
+			typeof G() == "function" && e(Rt);
+		}), reset(Nt);
+		var zt = sibling(Nt, 2), Bt = child(zt), Ht = (e) => {
 			var t = comment();
-			snippet(first_child(t), () => G() ?? noop), append(e, t);
+			snippet(first_child(t), () => be() ?? noop), append(e, t);
 		};
-		if_block(zt, (e) => {
-			typeof G() == "function" && e(Bt);
+		if_block(Bt, (e) => {
+			typeof be() == "function" && e(Ht);
 		});
-		var Ht = sibling(zt, 2), Gt = (e) => {
+		var Gt = sibling(Bt, 2), qt = (e) => {
 			var t = root_3$37();
 			let n;
 			var i = child(t);
@@ -17699,56 +18116,57 @@ function ListItem(e, t) {
 				},
 				alt: "",
 				get transformSvg() {
-					return lt();
+					return ut();
 				}
 			}), reset(i), reset(t), template_effect(() => {
-				set_attribute(t, "role", get(gt) ? "button" : null), set_attribute(t, "tabindex", get(gt) ? 0 : null), set_attribute(t, "data-pw", f()), set_attribute(t, "testid", f()), n = set_class(t, 1, "svelte-d2pqbq", null, n, { "prevent-focus": R() });
-			}), delegated("click", t, yt), delegated("keydown", t, Ot), append(e, t);
+				set_attribute(t, "role", get(_t) ? "button" : null), set_attribute(t, "tabindex", get(_t) ? 0 : null), set_attribute(t, "data-pw", p()), set_attribute(t, "testid", p()), n = set_class(t, 1, "svelte-d2pqbq", null, n, { "prevent-focus": te() });
+			}), delegated("click", t, xt), delegated("keydown", t, At), append(e, t);
 		};
-		if_block(Ht, (e) => {
-			typeof a() == "string" && a().length > 0 && e(Gt);
+		if_block(Gt, (e) => {
+			typeof a() == "string" && a().length > 0 && e(qt);
 		});
-		var qt = sibling(Ht, 2), Zt = (e) => {
+		var Zt = sibling(Gt, 2), Qt = (e) => {
 			var t = root_4$32();
 			Loader(child(t), {}), reset(t), append(e, t);
 		};
-		if_block(qt, (e) => {
-			C() && e(Zt);
+		if_block(Zt, (e) => {
+			k() && e(Qt);
 		});
-		var Qt = sibling(qt, 2), $t = (e) => {
+		var $t = sibling(Zt, 2), en = (e) => {
 			var t = root_5$29(), n = child(t, !0);
-			reset(t), template_effect(() => set_text(n, c())), append(e, t);
+			reset(t), template_effect(() => set_text(n, l())), append(e, t);
 		};
-		if_block(Qt, (e) => {
-			typeof c() == "string" && c().length > 0 && e($t);
-		}), reset(Rt), reset(at);
-		var en = sibling(at, 2), tn = child(en), nn = (e) => {
+		if_block($t, (e) => {
+			typeof l() == "string" && l().length > 0 && e(en);
+		}), reset(zt), reset(at);
+		var tn = sibling(at, 2), nn = child(tn), rn = (e) => {
 			Accordion(e, {
 				get expand() {
-					return k();
+					return R();
 				},
 				children: (e, t) => {
 					var n = comment();
-					snippet(first_child(n), be), append(e, n);
+					snippet(first_child(n), Me), append(e, n);
 				},
 				$$slots: { default: !0 }
 			});
 		};
-		if_block(tn, (e) => {
-			typeof be() == "function" && s() && e(nn);
-		}), reset(en), reset(Ue), reset(t), template_effect(() => {
-			set_class(t, 1, `item-container ${ct() ?? "" ?? ""}`, "svelte-d2pqbq"), it = set_class(Ue, 1, "item svelte-d2pqbq", null, it, { "prevent-focus": R() }), set_attribute(Ue, "role", te() ? null : ut() ?? "button"), set_attribute(Ue, "tabindex", te() ? null : ut() === "option" ? -1 : 0), set_attribute(Ue, "aria-selected", te() ? null : dt()), set_attribute(Ue, "id", ft()), set_attribute(Ue, "data-pw", l()), set_attribute(Ue, "testid", l()), ot = set_class(at, 1, "top-section svelte-d2pqbq", null, ot, { "prevent-focus": R() }), set_attribute(at, "role", get(pt) ? "button" : null), set_attribute(at, "tabindex", get(pt) ? 0 : null), set_attribute(at, "data-pw", u()), set_attribute(at, "testid", u());
-		}), delegated("click", Ue, xt), delegated("keydown", Ue, wt), delegated("click", at, St), delegated("keydown", at, Tt), append(e, t);
+		if_block(nn, (e) => {
+			typeof Me() == "function" && c() && e(rn);
+		}), reset(tn), reset(Ue), reset(t), template_effect(() => {
+			set_class(t, 1, `item-container ${lt() ?? "" ?? ""}`, "svelte-d2pqbq"), it = set_class(Ue, 1, "item svelte-d2pqbq", null, it, { "prevent-focus": te() }), set_attribute(Ue, "role", ne() ? null : dt() ?? "button"), set_attribute(Ue, "tabindex", ne() ? null : dt() === "option" ? -1 : 0), set_attribute(Ue, "aria-selected", ne() ? null : ft()), set_attribute(Ue, "id", pt()), set_attribute(Ue, "data-pw", u()), set_attribute(Ue, "testid", u()), ot = set_class(at, 1, "top-section svelte-d2pqbq", null, ot, { "prevent-focus": te() }), set_attribute(at, "role", get(mt) ? "button" : null), set_attribute(at, "tabindex", get(mt) ? 0 : null), set_attribute(at, "data-pw", f()), set_attribute(at, "testid", f());
+		}), delegated("click", Ue, Ct), delegated("keydown", Ue, Et), delegated("click", at, wt), delegated("keydown", at, Dt), append(e, t);
 	};
-	return if_block(jt, (e) => {
-		(typeof n() == "string" && n().length > 0 || typeof a() == "string" && a().length > 0 || typeof o() == "string" && o().length > 0 || typeof ne() == "function" || typeof re() == "function" || typeof G() == "function" || typeof be() == "function") && e(Mt);
-	}), append(e, At), pop(kt);
+	return if_block(Nt, (e) => {
+		(typeof n() == "string" && n().length > 0 || typeof a() == "string" && a().length > 0 || typeof o() == "string" && o().length > 0 || typeof re() == "function" || typeof G() == "function" || typeof be() == "function" || typeof Me() == "function") && e(Pt);
+	}), append(e, Mt), pop(jt);
 }
 delegate(["click", "keydown"]), create_custom_element(ListItem, {
 	leftImageUrl: {},
 	leftImageFallbackUrl: {},
 	rightImageUrl: {},
 	label: {},
+	sanitize: {},
 	useAccordion: {},
 	rightContentText: {},
 	testId: {},
@@ -17867,6 +18285,7 @@ customElements.define("sui-list-item", create_custom_element(ListItem_wc, {
 		reflect: !0,
 		type: "String"
 	},
+	sanitize: { type: "Object" },
 	useAccordion: {
 		attribute: "use-accordion",
 		type: "Boolean"
@@ -17948,7 +18367,7 @@ function computeMenuDropdownPosition(e) {
 //#region src/lib/Menu/Menu.svelte
 var root_1$51 = /* @__PURE__ */ from_html("<div class=\"menu-trigger svelte-ahcnny\"><!></div>"), root_2$40 = /* @__PURE__ */ from_html("<div class=\"menu-trigger svelte-ahcnny\" role=\"button\" tabindex=\"0\" aria-haspopup=\"menu\"><!></div>"), root_3$36 = /* @__PURE__ */ from_html("<div class=\"menu-separator svelte-ahcnny\" role=\"separator\"></div>"), root_4$31 = /* @__PURE__ */ from_html("<span class=\"menu-item-icon svelte-ahcnny\"><!></span>"), root_5$28 = /* @__PURE__ */ from_html("<div><!> <span class=\"menu-item-label svelte-ahcnny\"> </span></div>"), root_6$25 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"></div>"), root_7$23 = /* @__PURE__ */ from_html("<div><!> <!></div>"), $$css$103 = {
 	hash: "svelte-ahcnny",
-	code: ".menu-container.svelte-ahcnny {position:var(--menu-container-position, relative);display:var(--menu-container-display, inline-block);font-family:var(--menu-font-family, inherit);font-size:var(--menu-font-size, 14px);}.menu-trigger.svelte-ahcnny {cursor:pointer;-webkit-tap-highlight-color:transparent;}.menu-trigger.svelte-ahcnny:focus {outline:var(--menu-trigger-focus-outline, none);}.menu-dropdown.svelte-ahcnny {position:absolute;z-index:var(--menu-z-index, 10);top:var(--menu-dropdown-top, 100%);left:var(--menu-dropdown-left, 0);background-color:var(--menu-background-color, #ffffff);border:var(--menu-border, 1px solid #e0e0e0);border-radius:var(--menu-border-radius, var(--radius, 4px));box-shadow:var(--menu-box-shadow, 0px 4px 16px rgba(0, 0, 0, 0.12));min-width:var(--menu-min-width, 160px);max-height:var(--menu-max-height, 240px);overflow-y:auto;padding:var(--menu-padding, 4px 0);margin:var(--menu-margin, 4px 0);}\n\n  /* Placement corners — `bottom-left` is the base rule above (and stays fully\n     driven by the --menu-dropdown-top/left consumer tokens); the other corners\n     override the anchoring sides. The chained selector outweighs the base rule\n     regardless of source order. */.menu-dropdown.menu-dropdown-bottom-right.svelte-ahcnny {left:auto;right:0;}.menu-dropdown.menu-dropdown-top-left.svelte-ahcnny {top:auto;bottom:100%;}.menu-dropdown.menu-dropdown-top-right.svelte-ahcnny {top:auto;bottom:100%;left:auto;right:0;}\n\n  /* One-tick measuring pass for placement=\"auto\": the panel needs rendered\n     dimensions before the corner is chosen, without a visible flash. */.menu-dropdown.menu-dropdown-measuring.svelte-ahcnny {visibility:hidden;}.menu-item.svelte-ahcnny {display:flex;align-items:center;padding:var(--menu-item-padding, 8px 12px);cursor:pointer;color:var(--menu-item-color, #333333);background-color:var(--menu-item-background-color, transparent);gap:var(--menu-item-gap, 8px);white-space:var(--menu-item-white-space, nowrap);-webkit-tap-highlight-color:transparent;}.menu-item.svelte-ahcnny:hover {background-color:var(--menu-item-hover-background-color, #f5f5f5);color:var(--menu-item-hover-color, var(--menu-item-color, #333333));}.menu-item.svelte-ahcnny:focus {background-color:var(--menu-item-focus-background-color, #f0f0f0);outline:var(--menu-item-focus-outline, none);}\n\n  /* True selection (selectedValue match) — distinct from transient focus so the\n     highlight follows the chosen option, not wherever keyboard focus landed. */.menu-item-selected.svelte-ahcnny {background-color:var(--menu-item-selected-background-color, transparent);color:var(--menu-item-selected-color, inherit);}.menu-item-danger.svelte-ahcnny {color:var(--menu-item-danger-color, #dc3545);}.menu-item-danger.svelte-ahcnny:hover {background-color:var(--menu-item-danger-hover-background-color, #fff0f0);color:var(--menu-item-danger-hover-color, var(--menu-item-danger-color, #dc3545));}.menu-item-danger.svelte-ahcnny:focus {background-color:var(--menu-item-danger-focus-background-color, #fff0f0);}.menu-item-disabled.svelte-ahcnny {opacity:var(--menu-item-disabled-opacity, 0.4);cursor:var(--menu-item-disabled-cursor, not-allowed);pointer-events:none;}.menu-separator.svelte-ahcnny {height:var(--menu-separator-height, 1px);background-color:var(--menu-separator-color, #e0e0e0);margin:var(--menu-separator-margin, 4px 0);}.menu-item-icon.svelte-ahcnny {display:inline-flex;height:var(--menu-item-icon-height, 16px);width:var(--menu-item-icon-width, 16px);flex-shrink:0;}.menu-item-icon.svelte-ahcnny img,\n  .menu-item-icon.svelte-ahcnny svg {width:100%;height:100%;}.menu-item-label.svelte-ahcnny {flex:1;font-weight:var(--menu-item-font-weight, 400);line-height:var(--menu-item-line-height, 1.4);}"
+	code: ".menu-container.svelte-ahcnny {position:var(--menu-container-position, relative);display:var(--menu-container-display, inline-block);font-family:var(--menu-font-family, inherit);font-size:var(--menu-font-size, 14px);}.menu-trigger.svelte-ahcnny {cursor:pointer;-webkit-tap-highlight-color:transparent;}\n\n  /* :focus-visible, not :focus: the trigger is opened by mouse click as often\n     as by keyboard (onclick={toggle} above), and a ring on every mouse-opened\n     menu would be noise. The default used to be `none` with nothing standing\n     in for it, so a keyboard user tabbing to (or landing back on, after\n     Escape closes the dropdown) the trigger had no visible sign it was\n     focused. SplitButton's own trigger wraps this same element and used to\n     set --menu-trigger-focus-outline to `none` for the identical reason --\n     see its .split-button-trigger, now fixed to inherit this default instead. */.menu-trigger.svelte-ahcnny:focus-visible {outline:var(--menu-trigger-focus-outline, 2px solid #2563eb);outline-offset:var(--menu-trigger-focus-outline-offset, 2px);}.menu-dropdown.svelte-ahcnny {position:absolute;z-index:var(--menu-z-index, 10);top:var(--menu-dropdown-top, 100%);left:var(--menu-dropdown-left, 0);background-color:var(--menu-background-color, #ffffff);border:var(--menu-border, 1px solid #e0e0e0);border-radius:var(--menu-border-radius, var(--radius, 4px));box-shadow:var(--menu-box-shadow, 0px 4px 16px rgba(0, 0, 0, 0.12));min-width:var(--menu-min-width, 160px);max-height:var(--menu-max-height, 240px);overflow-y:auto;padding:var(--menu-padding, 4px 0);margin:var(--menu-margin, 4px 0);}\n\n  /* Placement corners — `bottom-left` is the base rule above (and stays fully\n     driven by the --menu-dropdown-top/left consumer tokens); the other corners\n     override the anchoring sides. The chained selector outweighs the base rule\n     regardless of source order. */.menu-dropdown.menu-dropdown-bottom-right.svelte-ahcnny {left:auto;right:0;}.menu-dropdown.menu-dropdown-top-left.svelte-ahcnny {top:auto;bottom:100%;}.menu-dropdown.menu-dropdown-top-right.svelte-ahcnny {top:auto;bottom:100%;left:auto;right:0;}\n\n  /* One-tick measuring pass for placement=\"auto\": the panel needs rendered\n     dimensions before the corner is chosen, without a visible flash. */.menu-dropdown.menu-dropdown-measuring.svelte-ahcnny {visibility:hidden;}.menu-item.svelte-ahcnny {display:flex;align-items:center;padding:var(--menu-item-padding, 8px 12px);cursor:pointer;color:var(--menu-item-color, #333333);background-color:var(--menu-item-background-color, transparent);gap:var(--menu-item-gap, 8px);white-space:var(--menu-item-white-space, nowrap);-webkit-tap-highlight-color:transparent;}.menu-item.svelte-ahcnny:hover {background-color:var(--menu-item-hover-background-color, #f5f5f5);color:var(--menu-item-hover-color, var(--menu-item-color, #333333));}.menu-item.svelte-ahcnny:focus {background-color:var(--menu-item-focus-background-color, #f0f0f0);outline:var(--menu-item-focus-outline, none);}\n\n  /* True selection (selectedValue match) — distinct from transient focus so the\n     highlight follows the chosen option, not wherever keyboard focus landed. */.menu-item-selected.svelte-ahcnny {background-color:var(--menu-item-selected-background-color, transparent);color:var(--menu-item-selected-color, inherit);}.menu-item-danger.svelte-ahcnny {color:var(--menu-item-danger-color, #dc3545);}.menu-item-danger.svelte-ahcnny:hover {background-color:var(--menu-item-danger-hover-background-color, #fff0f0);color:var(--menu-item-danger-hover-color, var(--menu-item-danger-color, #dc3545));}.menu-item-danger.svelte-ahcnny:focus {background-color:var(--menu-item-danger-focus-background-color, #fff0f0);}.menu-item-disabled.svelte-ahcnny {opacity:var(--menu-item-disabled-opacity, 0.4);cursor:var(--menu-item-disabled-cursor, not-allowed);pointer-events:none;}.menu-separator.svelte-ahcnny {height:var(--menu-separator-height, 1px);background-color:var(--menu-separator-color, #e0e0e0);margin:var(--menu-separator-margin, 4px 0);}.menu-item-icon.svelte-ahcnny {display:inline-flex;height:var(--menu-item-icon-height, 16px);width:var(--menu-item-icon-width, 16px);flex-shrink:0;}.menu-item-icon.svelte-ahcnny img,\n  .menu-item-icon.svelte-ahcnny svg {width:100%;height:100%;}.menu-item-label.svelte-ahcnny {flex:1;font-weight:var(--menu-item-font-weight, 400);line-height:var(--menu-item-line-height, 1.4);}"
 };
 function Menu(e, t) {
 	push(t, !0), append_styles$1(e, $$css$103);
@@ -18549,7 +18968,7 @@ create_custom_element(OverlayAnimation, {
 //#region src/lib/Modal/Modal.svelte
 var root_1$50 = /* @__PURE__ */ from_html("<div role=\"button\" tabindex=\"0\"><!></div>"), root_2$39 = /* @__PURE__ */ from_html("<div><!></div>"), root_3$35 = /* @__PURE__ */ from_html("<div class=\"header-text svelte-lnufm\"> </div>"), root_4$30 = /* @__PURE__ */ from_html("<div class=\"header svelte-lnufm\"><!> <!> <!></div>"), root_5$27 = /* @__PURE__ */ from_html("<div class=\"footer-content svelte-lnufm\"><!></div>"), root_6$24 = /* @__PURE__ */ from_html("<div class=\"footer-secondary-button svelte-lnufm\"><!></div>"), root_7$22 = /* @__PURE__ */ from_html("<div class=\"footer-primary-button svelte-lnufm\"><!></div>"), root_8$20 = /* @__PURE__ */ from_html("<div class=\"footer-content svelte-lnufm\"><div class=\"footer-action-buttons svelte-lnufm\"><!> <!></div></div>"), root_9$17 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"><!> <div class=\"slot-content svelte-lnufm\"><!></div> <!></div>"), $$css$101 = {
 	hash: "svelte-lnufm",
-	code: ".modal.svelte-lnufm {position:fixed;top:0;bottom:0;left:0;right:0;width:var(--modal-width, 100vw);height:var(--modal-height, 100vh);display:flex;flex-direction:column;z-index:var(--modal-z-index, 15);-webkit-tap-highlight-color:transparent;margin:var(--modal-margin);}.overlay-active.svelte-lnufm {\n    /* Prefer the modal-specific token; fall back to the legacy generic\n       --background-color (kept for backward compatibility), then the default.\n       The generic name collides with app-level --background-color tokens, which\n       silently override the overlay; --modal-overlay-background-color lets a\n       consumer theme the backdrop without that collision. */background-color:var(--modal-overlay-background-color, var(--background-color, #00000066));backdrop-filter:var(--modal-overlay-backdrop-filter, none);-webkit-backdrop-filter:var(--modal-overlay-backdrop-filter, none);pointer-events:auto;}.overlay-inactive.svelte-lnufm {pointer-events:none;}.modal-content.svelte-lnufm {pointer-events:auto;background-color:var(--modal-content-background-color, #ffffff);cursor:auto;display:flex;flex-direction:column;border-radius:var(--modal-border-radius, var(--radius, 4px));overflow:var(--modal-content-overflow, auto);border-top:var(--modal-content-border-top);\n    /* tabindex=\"-1\" makes this the focus-trap's fallback target when the modal\n       has no focusable content of its own (see _interaction/focus.ts); it is\n       never in the Tab order itself, so it needs no visible focus ring the way\n       a real focusable element would. Matches Sheet's sheet-panel. */outline:none;\n    /* Viewport containment for every size class: only .fit-content used to carry\n       a max-height, so a size whose height var is overridden to fit-content (or\n       anything taller than the screen) grew past the viewport and pushed its\n       footer and bottom rounding off-screen. dvh tracks the real visible\n       viewport on mobile; the vh line is the fallback for engines without dvh. */max-height:var(--modal-max-height, calc(100vh - 32px));max-height:var(--modal-max-height, calc(100dvh - 32px));}.slot-content.svelte-lnufm {display:var(--modal-display, flex);\n    /* Flex children default to min-height: auto and refuse to shrink below their\n       content, which defeats the overflow-y scroll once modal-content is\n       height-capped — the content spills instead of scrolling and the footer is\n       pushed out. 0 lets the slot shrink so its own scrollbar engages and the\n       header/footer stay pinned inside the viewport. */min-height:var(--modal-slot-content-min-height, 0);overflow-y:var(--modal-overflow-y, scroll);scrollbar-width:var(--modal-scrollbar-width, none);padding:var(--modal-content-padding, 0);}.slot-content.svelte-lnufm::-webkit-scrollbar {display:none;}.center.svelte-lnufm {justify-content:var(--modal-center-justify-content, center);align-items:var(--modal-center-align-items, center);}.bottom.svelte-lnufm {justify-content:var(--modal-bottom-justify-content, flex-end);align-items:var(--modal-bottom-align-items);}.top.svelte-lnufm {justify-content:var(--modal-top-justify-content, flex-start);align-items:var(--modal-top-align-items);}.small.svelte-lnufm {height:var(--modal-small-height, 20vh);width:var(--modal-small-width);}.medium.svelte-lnufm {height:var(--modal-medium-height, 50vh);width:var(--modal-medium-width);}.large.svelte-lnufm {height:var(--modal-large-height, 80vh);width:var(--modal-large-width);}.fit-content.svelte-lnufm {height:fit-content;max-height:var(--modal-fit-content-max-height, 80vh);}.header.svelte-lnufm {display:flex;background-color:var(--modal-header-background-color, #f6f7f9);padding:var(--modal-header-padding, 18px 20px);border-radius:var(--modal-header-border-radius, 0px);border-bottom:var(--modal-header-border-bottom, none);align-items:var(--modal-header-align-items, center);}.footer-content.svelte-lnufm {display:flex;background-color:var(--modal-footer-background-color, #f6f7f9);padding:var(--modal-footer-padding, 18px 20px);border-radius:var(--modal-footer-border-radius, 0px);border-top:var(--modal-footer-border-top, none);justify-content:var(--modal-footer-justify-content, none);}.footer-action-buttons.svelte-lnufm {display:flex;gap:var(--modal-footer-gap, 0px);width:var(--modal-footer-action-buttons-width, fit-content);}.footer-secondary-button.svelte-lnufm {--button-max-height: var(--modal-footer-secondary-button-max-height);--button-max-width: var(--modal-footer-secondary-button-max-width);--button-font-family: var(--modal-footer-secondary-button-font-family);--button-font-weight: var(--modal-footer-secondary-button-font-weight, 500);--button-font-size: var(--modal-footer-secondary-button-font-size, 14px);--button-color: var(--modal-footer-secondary-button-color, #3a4550);--button-text-color: var(--modal-footer-secondary-button-text-color, white);--button-height: var(--modal-footer-secondary-button-height, fit-content);--button-padding: var(--modal-footer-secondary-button-padding, 16px);--button-margin: var(--modal-footer-secondary-button-margin);--button-border-radius: var(--modal-footer-secondary-button-border-radius, var(--radius, 4px));--button-width: var(--modal-footer-secondary-button-width, fit-content);--cursor: var(--modal-footer-secondary-button-cursor, pointer);--opacity: var(--modal-footer-secondary-button-opacity, 1);--button-border: var(--modal-footer-secondary-button-border, none);--disabled-background-color: var(\n      --modal-footer-secondary-button-disabled-color,\n      var(--modal-footer-secondary-button-color, #3a4550)\n    );--disabled-text-color: var(\n      --modal-footer-secondary-button-disabled-text-color,\n      var(--modal-footer-secondary-button-text-color, white)\n    );--disabled-border: var(\n      --modal-footer-secondary-button-disabled-border,\n      var(--modal-footer-secondary-button-border, none)\n    );--disabled-opacity: var(--modal-footer-secondary-button-disabled-opacity, 0.4);--button-justify-content: var(--modal-footer-secondary-button-justify-content, center);--button-content-flex-direction: var(\n      --modal-footer-secondary-button-content-flex-direction,\n      row\n    );--button-content-gap: var(--modal-footer-secondary-button-content-gap, 16px);--button-visibility: var(--modal-footer-secondary-button-visibility, visible);--button-box-shadow: var(--modal-footer-secondary-button-box-shadow, none);order:var(--modal-secondary-button-order, none);flex:var(--modal-footer-secondary-button-flex-value, none);}.footer-primary-button.svelte-lnufm {--button-max-height: var(--modal-footer-primary-button-max-height);--button-max-width: var(--modal-footer-primary-button-max-width);--button-font-family: var(--modal-footer-primary-button-font-family);--button-font-weight: var(--modal-footer-primary-button-font-weight, 500);--button-font-size: var(--modal-footer-primary-button-font-size, 14px);--button-color: var(--modal-footer-primary-button-color, #3a4550);--button-text-color: var(--modal-footer-primary-button-text-color, white);--button-height: var(--modal-footer-primary-button-height, fit-content);--button-padding: var(--modal-footer-primary-button-padding, 16px);--button-margin: var(--modal-footer-primary-button-margin);--button-border-radius: var(--modal-footer-primary-button-border-radius, var(--radius, 4px));--button-width: var(--modal-footer-primary-button-width, fit-content);--cursor: var(--modal-footer-primary-button-cursor, pointer);--opacity: var(--modal-footer-primary-button-opacity, 1);--button-border: var(--modal-footer-primary-button-border, none);--disabled-background-color: var(\n      --modal-footer-primary-button-disabled-color,\n      var(--modal-footer-primary-button-color, #3a4550)\n    );--disabled-text-color: var(\n      --modal-footer-primary-button-disabled-text-color,\n      var(--modal-footer-primary-button-text-color, white)\n    );--disabled-border: var(\n      --modal-footer-primary-button-disabled-border,\n      var(--modal-footer-primary-button-border, none)\n    );--disabled-opacity: var(--modal-footer-primary-button-disabled-opacity, 0.4);--button-justify-content: var(--modal-footer-primary-button-justify-content, center);--button-content-flex-direction: var(--modal-footer-primary-button-content-flex-direction, row);--button-content-gap: var(--modal-footer-primary-button-content-gap, 16px);--button-visibility: var(--modal-footer-primary-button-visibility, visible);--button-box-shadow: var(--modal-footer-primary-button-box-shadow, none);order:var(--modal-primary-button-order, none);flex:var(--modal-footer-primary-button-flex-value, none);}.header-text.svelte-lnufm {display:flex;align-items:center;flex:1;font-size:var(--header-text-size, 16px);font-weight:var(--modal-header-text-weight, inherit);line-height:var(--modal-header-text-line-height, inherit);letter-spacing:var(--modal-header-text-letter-spacing, inherit);}\n\n  /* The header images render through the Img component (inline svg or img), so\n     these classes ride on Img's element — match them via :global under the\n     scoped .header to keep the sizing contract. */.header.svelte-lnufm .header-left-img,\n  .header.svelte-lnufm .header-right-img {padding-top:var(--header-img-top-padding, 5px);cursor:pointer;}.header.svelte-lnufm .header-left-img {margin:var(--header-left-image-margin, 0px 18px 0px 0px);width:var(--header-left-image-width, 25px);height:var(--header-left-image-height, 25px);}.header.svelte-lnufm .header-right-img {width:var(--header-right-image-width, 25px);height:var(--header-right-image-height, 25px);padding:var(--header-right-image-padding);}"
+	code: ".modal.svelte-lnufm {position:fixed;top:0;bottom:0;left:0;right:0;width:var(--modal-width, 100vw);height:var(--modal-height, 100vh);display:flex;flex-direction:column;z-index:var(--modal-z-index, 15);-webkit-tap-highlight-color:transparent;margin:var(--modal-margin);}.overlay-active.svelte-lnufm {\n    /* Prefer the modal-specific token; fall back to the legacy generic\n       --background-color (kept for backward compatibility), then the default.\n       The generic name collides with app-level --background-color tokens, which\n       silently override the overlay; --modal-overlay-background-color lets a\n       consumer theme the backdrop without that collision. */background-color:var(--modal-overlay-background-color, var(--background-color, #00000066));backdrop-filter:var(--modal-overlay-backdrop-filter, none);-webkit-backdrop-filter:var(--modal-overlay-backdrop-filter, none);pointer-events:auto;}.overlay-inactive.svelte-lnufm {pointer-events:none;}.modal-content.svelte-lnufm {pointer-events:auto;background-color:var(--modal-content-background-color, #ffffff);cursor:auto;display:flex;flex-direction:column;border-radius:var(--modal-border-radius, var(--radius, 4px));overflow:var(--modal-content-overflow, auto);border-top:var(--modal-content-border-top);outline:none;\n    /* Viewport containment for every size class: only .fit-content used to carry\n       a max-height, so a size whose height var is overridden to fit-content (or\n       anything taller than the screen) grew past the viewport and pushed its\n       footer and bottom rounding off-screen. dvh tracks the real visible\n       viewport on mobile; the vh line is the fallback for engines without dvh. */max-height:var(--modal-max-height, calc(100vh - 32px));max-height:var(--modal-max-height, calc(100dvh - 32px));}\n\n  /* The comment this replaced claimed tabindex=\"-1\" meant this never needed a\n     ring because it's \"never in the Tab order itself\" -- true, but beside the\n     point: onMount calls focusEntryPoint(modalContent), which focuses THIS\n     element directly (real DOM focus, not merely reachable via Tab) whenever\n     the modal has no focusable content of its own. That is exactly Sheet's\n     sheet-panel problem, and sheet-panel got the fix this comment said it\n     \"matches\" -- this one didn't. :focus-visible so the trigger click that\n     opens the modal shows nothing new; offset is negative like Sheet's,\n     since a modal can be sized to fill nearly the whole viewport. */.modal-content.svelte-lnufm:focus-visible {outline:var(--modal-content-focus-outline, 2px solid #2563eb);outline-offset:var(--modal-content-focus-outline-offset, -2px);}.slot-content.svelte-lnufm {display:var(--modal-display, flex);\n    /* Flex children default to min-height: auto and refuse to shrink below their\n       content, which defeats the overflow-y scroll once modal-content is\n       height-capped — the content spills instead of scrolling and the footer is\n       pushed out. 0 lets the slot shrink so its own scrollbar engages and the\n       header/footer stay pinned inside the viewport. */min-height:var(--modal-slot-content-min-height, 0);overflow-y:var(--modal-overflow-y, scroll);scrollbar-width:var(--modal-scrollbar-width, none);padding:var(--modal-content-padding, 0);}.slot-content.svelte-lnufm::-webkit-scrollbar {display:none;}.center.svelte-lnufm {justify-content:var(--modal-center-justify-content, center);align-items:var(--modal-center-align-items, center);}.bottom.svelte-lnufm {justify-content:var(--modal-bottom-justify-content, flex-end);align-items:var(--modal-bottom-align-items);}.top.svelte-lnufm {justify-content:var(--modal-top-justify-content, flex-start);align-items:var(--modal-top-align-items);}.small.svelte-lnufm {height:var(--modal-small-height, 20vh);width:var(--modal-small-width);}.medium.svelte-lnufm {height:var(--modal-medium-height, 50vh);width:var(--modal-medium-width);}.large.svelte-lnufm {height:var(--modal-large-height, 80vh);width:var(--modal-large-width);}.fit-content.svelte-lnufm {height:fit-content;max-height:var(--modal-fit-content-max-height, 80vh);}.header.svelte-lnufm {display:flex;background-color:var(--modal-header-background-color, #f6f7f9);padding:var(--modal-header-padding, 18px 20px);border-radius:var(--modal-header-border-radius, 0px);border-bottom:var(--modal-header-border-bottom, none);align-items:var(--modal-header-align-items, center);}.footer-content.svelte-lnufm {display:flex;background-color:var(--modal-footer-background-color, #f6f7f9);padding:var(--modal-footer-padding, 18px 20px);border-radius:var(--modal-footer-border-radius, 0px);border-top:var(--modal-footer-border-top, none);justify-content:var(--modal-footer-justify-content, none);}.footer-action-buttons.svelte-lnufm {display:flex;gap:var(--modal-footer-gap, 0px);width:var(--modal-footer-action-buttons-width, fit-content);}.footer-secondary-button.svelte-lnufm {--button-max-height: var(--modal-footer-secondary-button-max-height);--button-max-width: var(--modal-footer-secondary-button-max-width);--button-font-family: var(--modal-footer-secondary-button-font-family);--button-font-weight: var(--modal-footer-secondary-button-font-weight, 500);--button-font-size: var(--modal-footer-secondary-button-font-size, 14px);--button-color: var(--modal-footer-secondary-button-color, #3a4550);--button-text-color: var(--modal-footer-secondary-button-text-color, white);--button-height: var(--modal-footer-secondary-button-height, fit-content);--button-padding: var(--modal-footer-secondary-button-padding, 16px);--button-margin: var(--modal-footer-secondary-button-margin);--button-border-radius: var(--modal-footer-secondary-button-border-radius, var(--radius, 4px));--button-width: var(--modal-footer-secondary-button-width, fit-content);--cursor: var(--modal-footer-secondary-button-cursor, pointer);--opacity: var(--modal-footer-secondary-button-opacity, 1);--button-border: var(--modal-footer-secondary-button-border, none);--disabled-background-color: var(\n      --modal-footer-secondary-button-disabled-color,\n      var(--modal-footer-secondary-button-color, #3a4550)\n    );--disabled-text-color: var(\n      --modal-footer-secondary-button-disabled-text-color,\n      var(--modal-footer-secondary-button-text-color, white)\n    );--disabled-border: var(\n      --modal-footer-secondary-button-disabled-border,\n      var(--modal-footer-secondary-button-border, none)\n    );--disabled-opacity: var(--modal-footer-secondary-button-disabled-opacity, 0.4);--button-justify-content: var(--modal-footer-secondary-button-justify-content, center);--button-content-flex-direction: var(\n      --modal-footer-secondary-button-content-flex-direction,\n      row\n    );--button-content-gap: var(--modal-footer-secondary-button-content-gap, 16px);--button-visibility: var(--modal-footer-secondary-button-visibility, visible);--button-box-shadow: var(--modal-footer-secondary-button-box-shadow, none);order:var(--modal-secondary-button-order, none);flex:var(--modal-footer-secondary-button-flex-value, none);}.footer-primary-button.svelte-lnufm {--button-max-height: var(--modal-footer-primary-button-max-height);--button-max-width: var(--modal-footer-primary-button-max-width);--button-font-family: var(--modal-footer-primary-button-font-family);--button-font-weight: var(--modal-footer-primary-button-font-weight, 500);--button-font-size: var(--modal-footer-primary-button-font-size, 14px);--button-color: var(--modal-footer-primary-button-color, #3a4550);--button-text-color: var(--modal-footer-primary-button-text-color, white);--button-height: var(--modal-footer-primary-button-height, fit-content);--button-padding: var(--modal-footer-primary-button-padding, 16px);--button-margin: var(--modal-footer-primary-button-margin);--button-border-radius: var(--modal-footer-primary-button-border-radius, var(--radius, 4px));--button-width: var(--modal-footer-primary-button-width, fit-content);--cursor: var(--modal-footer-primary-button-cursor, pointer);--opacity: var(--modal-footer-primary-button-opacity, 1);--button-border: var(--modal-footer-primary-button-border, none);--disabled-background-color: var(\n      --modal-footer-primary-button-disabled-color,\n      var(--modal-footer-primary-button-color, #3a4550)\n    );--disabled-text-color: var(\n      --modal-footer-primary-button-disabled-text-color,\n      var(--modal-footer-primary-button-text-color, white)\n    );--disabled-border: var(\n      --modal-footer-primary-button-disabled-border,\n      var(--modal-footer-primary-button-border, none)\n    );--disabled-opacity: var(--modal-footer-primary-button-disabled-opacity, 0.4);--button-justify-content: var(--modal-footer-primary-button-justify-content, center);--button-content-flex-direction: var(--modal-footer-primary-button-content-flex-direction, row);--button-content-gap: var(--modal-footer-primary-button-content-gap, 16px);--button-visibility: var(--modal-footer-primary-button-visibility, visible);--button-box-shadow: var(--modal-footer-primary-button-box-shadow, none);order:var(--modal-primary-button-order, none);flex:var(--modal-footer-primary-button-flex-value, none);}.header-text.svelte-lnufm {display:flex;align-items:center;flex:1;font-size:var(--header-text-size, 16px);font-weight:var(--modal-header-text-weight, inherit);line-height:var(--modal-header-text-line-height, inherit);letter-spacing:var(--modal-header-text-letter-spacing, inherit);}\n\n  /* The header images render through the Img component (inline svg or img), so\n     these classes ride on Img's element — match them via :global under the\n     scoped .header to keep the sizing contract. */.header.svelte-lnufm .header-left-img,\n  .header.svelte-lnufm .header-right-img {padding-top:var(--header-img-top-padding, 5px);cursor:pointer;}.header.svelte-lnufm .header-left-img {margin:var(--header-left-image-margin, 0px 18px 0px 0px);width:var(--header-left-image-width, 25px);height:var(--header-left-image-height, 25px);}.header.svelte-lnufm .header-right-img {width:var(--header-right-image-width, 25px);height:var(--header-right-image-height, 25px);padding:var(--header-right-image-padding);}"
 };
 function Modal(e, t) {
 	push(t, !0), append_styles$1(e, $$css$101);
@@ -19652,7 +20071,7 @@ function computeSelectDropdownPosition(e) {
 }
 //#endregion
 //#region src/lib/Select/Select.svelte
-var root_1$46 = /* @__PURE__ */ from_html("<div class=\"select-empty svelte-52lifo\">No results</div>"), root_2$35 = /* @__PURE__ */ from_html("<span class=\"select-option-check svelte-52lifo\"></span>"), root_3$32 = /* @__PURE__ */ from_html("<span class=\"select-option-dash svelte-52lifo\"></span>"), root_4$27 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"><!></span>"), root_5$25 = /* @__PURE__ */ from_html("<div><!> </div>"), root_6$23 = /* @__PURE__ */ from_html("<span class=\"select-option-tick svelte-52lifo\" aria-hidden=\"true\"></span>"), root_7$21 = /* @__PURE__ */ from_html("<div><!> <!> <span class=\"select-option-label svelte-52lifo\"> </span> <!></div>"), root_8$19 = /* @__PURE__ */ from_html("<div class=\"select-bottom-content svelte-52lifo\"><!></div>"), root_9$16 = /* @__PURE__ */ from_html("<!> <!>", 1), root_10$15 = /* @__PURE__ */ from_html("<input type=\"hidden\"/>"), root_11$13 = /* @__PURE__ */ from_html("<input class=\"select-search svelte-52lifo\" type=\"text\" autocomplete=\"off\"/>"), root_12$12 = /* @__PURE__ */ from_html("<span class=\"select-placeholder svelte-52lifo\"> </span>"), root_13$10 = /* @__PURE__ */ from_html("<span> </span>"), root_14$9 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"select-clear svelte-52lifo\" aria-label=\"Clear selection\"><span aria-hidden=\"true\">×</span></button>"), root_15$7 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"select-error-message svelte-52lifo\"> </div>"), root_16$6 = /* @__PURE__ */ from_html("<div><input class=\"select-menu-search svelte-52lifo\" type=\"search\" aria-label=\"Search options\" autocomplete=\"off\"/> <div class=\"select-menu-list svelte-52lifo\" role=\"listbox\" tabindex=\"-1\"><!></div> <!></div>"), root_17$5 = /* @__PURE__ */ from_html("<div role=\"listbox\"><!></div>"), root_18$5 = /* @__PURE__ */ from_html("<div><!> <div><div><!> <!> <span class=\"select-arrow svelte-52lifo\"></span></div> <!></div> <!> <!></div>"), $$css$95 = {
+var root_1$46 = /* @__PURE__ */ from_html("<div class=\"select-empty svelte-52lifo\">No results</div>"), root_2$35 = /* @__PURE__ */ from_html("<span class=\"select-option-check svelte-52lifo\"></span>"), root_3$32 = /* @__PURE__ */ from_html("<span class=\"select-option-dash svelte-52lifo\"></span>"), root_4$27 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"><!></span>"), root_5$25 = /* @__PURE__ */ from_html("<div><!> </div>"), root_6$23 = /* @__PURE__ */ from_html("<span class=\"select-option-tick svelte-52lifo\" aria-hidden=\"true\"></span>"), root_7$21 = /* @__PURE__ */ from_html("<div><!> <!> <span class=\"select-option-label svelte-52lifo\"> </span> <!></div>"), root_8$19 = /* @__PURE__ */ from_html("<div class=\"select-bottom-content svelte-52lifo\"><!></div>"), root_9$16 = /* @__PURE__ */ from_html("<!> <!>", 1), root_10$15 = /* @__PURE__ */ from_html("<input type=\"hidden\"/>"), root_11$13 = /* @__PURE__ */ from_html("<input class=\"select-search svelte-52lifo\" type=\"text\" autocomplete=\"off\"/>"), root_12$12 = /* @__PURE__ */ from_html("<span class=\"select-placeholder svelte-52lifo\"> </span>"), root_13$10 = /* @__PURE__ */ from_html("<span> </span>"), root_14$9 = /* @__PURE__ */ from_html("<button type=\"button\" class=\"select-clear svelte-52lifo\" aria-label=\"Clear selection\"><span aria-hidden=\"true\">×</span></button>"), root_15$7 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"select-error-message svelte-52lifo\"> </div>"), root_16$6 = /* @__PURE__ */ from_html("<div><input class=\"select-menu-search svelte-52lifo\" type=\"search\" aria-label=\"Search options\" autocomplete=\"off\"/> <div class=\"select-menu-list svelte-52lifo\" role=\"listbox\" tabindex=\"-1\"><!></div> <!></div>"), root_17$6 = /* @__PURE__ */ from_html("<div role=\"listbox\"><!></div>"), root_18$5 = /* @__PURE__ */ from_html("<div><!> <div><div><!> <!> <span class=\"select-arrow svelte-52lifo\"></span></div> <!></div> <!> <!></div>"), $$css$95 = {
 	hash: "svelte-52lifo",
 	code: ".select.svelte-52lifo {position:relative;width:var(--select-width, 100%);font-family:var(--select-font-family, inherit);font-size:var(--select-font-size, 14px);color:var(--select-color, #333333);}.select.disabled.svelte-52lifo {opacity:var(--select-disabled-opacity, 0.5);cursor:var(--select-disabled-cursor, not-allowed);pointer-events:none;}.select-trigger.svelte-52lifo {display:flex;flex-wrap:wrap;align-items:center;gap:var(--select-trigger-gap, 4px);min-height:var(--select-trigger-min-height, 40px);padding:var(--select-trigger-padding, 8px 12px);background:var(--select-trigger-background, #ffffff);border:var(--select-trigger-border, 1px solid #cccccc);border-radius:var(--select-trigger-border-radius, var(--radius, 4px));cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:var(--select-trigger-transition, border-color 0.15s, box-shadow 0.15s);}.select-trigger.svelte-52lifo .select-left-icon {--image-width: var(--select-left-icon-size, 16px);--image-height: var(--select-left-icon-size, 16px);--image-object-fit: contain;\n\n    /* The icon inlines, so a currentColor asset resolves against this. Defaults to\n       `inherit` — the trigger's text colour, which is what it already did — so this is\n       a hook, not a change. Without it a consumer cannot tint the icon independently\n       of the label, and an icon migrated to currentColor is forced to match its label\n       exactly, flattening any deliberate muted-icon/strong-label hierarchy. */color:var(--select-left-icon-color, inherit);flex:none;}.select-trigger.svelte-52lifo:hover:not(.disabled:where(.svelte-52lifo) .select-trigger:where(.svelte-52lifo)) {border-color:var(--select-trigger-hover-border-color, #999999);}.select-trigger.svelte-52lifo:focus-within,\n  .select.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-trigger-focus-border-color, #2563eb);box-shadow:var(--select-trigger-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}\n\n  /* Pressed feedback on the trigger. `:active` only, so it lasts exactly as\n     long as the pointer is down and never lingers as a stuck state the way a\n     class-driven one can. */.select.svelte-52lifo:not(.disabled) .select-trigger:where(.svelte-52lifo):active {background:var(--select-trigger-pressed-background, #ededed);}\n\n  /* The error border has to outrank BOTH hover and focus/open, or the field\n     stops reading as invalid the moment the user enters it -- which is the one\n     moment they most need to see it. Listed after them, at equal or higher\n     specificity, rather than reached for with !important. */.select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo),\n  .select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):hover,\n  .select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):focus-within,\n  .select.error.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-trigger-error-border-color, #dc2626);}.select.error.svelte-52lifo .select-trigger:where(.svelte-52lifo):focus-within,\n  .select.error.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {box-shadow:var(--select-trigger-error-shadow, 0 0 0 2px rgba(220, 38, 38, 0.2));}.select-error-message.svelte-52lifo {margin-top:var(--select-error-message-margin-top, 4px);font-size:var(--select-error-message-font-size, 12px);color:var(--select-error-message-color, #dc2626);}.select-control.svelte-52lifo {position:relative;}.select-control.has-clear.svelte-52lifo .select-trigger:where(.svelte-52lifo) {padding-inline-end:calc(var(--select-clear-size, 18px) + 36px);}.select-control.has-clear.svelte-52lifo .select-arrow:where(.svelte-52lifo) {position:absolute;right:12px;}.select-clear.svelte-52lifo {position:absolute;right:32px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--select-clear-size, 18px);height:var(--select-clear-size, 18px);margin:0;padding:0;border:none;border-radius:var(--select-clear-border-radius, var(--radius, 4px));background:var(--select-clear-background, transparent);color:var(--select-clear-color, #666666);font-size:var(--select-clear-font-size, 16px);line-height:1;cursor:pointer;}.select-clear.svelte-52lifo:focus-visible {outline:var(--select-clear-focus-outline, 2px solid currentColor);outline-offset:2px;}.select-clear.svelte-52lifo:hover {background:var(--select-clear-hover-background, #ededed);color:var(--select-clear-hover-color, #111111);}.select-clear.svelte-52lifo:active {background:var(--select-clear-pressed-background, #e0e0e0);}.select-value.svelte-52lifo {flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:var(--select-value-align, left);}.select-placeholder.svelte-52lifo {flex:1;color:var(--select-placeholder-color, #666666);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:var(--select-value-align, left);}.select-search.svelte-52lifo {flex:1;min-width:60px;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;color:inherit;padding:0;cursor:text;}.select-search.svelte-52lifo::placeholder {color:var(--select-placeholder-color, #6b7280);}.select-arrow.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;width:var(--select-arrow-size, 16px);height:var(--select-arrow-size, 16px);color:var(--select-arrow-color, #666666);flex-shrink:0;transition:transform var(--select-arrow-transition-duration, var(--motion-duration, 0.15s))\n      var(--select-arrow-transition-easing, var(--motion-easing, ease));}.select.open.svelte-52lifo .select-arrow:where(.svelte-52lifo) {transform:rotate(180deg);}.select-arrow.svelte-52lifo svg {width:100%;height:100%;}\n\n  /* Anchors the in-flow panel above the trigger. `margin-top` is what the\n     downward panel uses for the gap, so it has to be unset here or the panel\n     sits a gap's width too high. */.select-dropdown.select-dropdown-up.svelte-52lifo {top:auto;bottom:100%;margin-top:0;margin-bottom:var(--select-dropdown-gap, 4px);}\n\n  /* One-tick measuring pass for placement=\"auto\": the panel needs rendered\n     dimensions before the corner is chosen, without a visible flash at the\n     wrong corner. */.select-dropdown.select-dropdown-measuring.svelte-52lifo {visibility:hidden;}.select-dropdown.svelte-52lifo {position:absolute;top:100%;left:var(--select-dropdown-left, 0);right:var(--select-dropdown-right, 0);min-width:var(--select-dropdown-min-width, auto);max-width:var(--select-dropdown-max-width, none);width:var(--select-dropdown-width, auto);margin-top:var(--select-dropdown-gap, 4px);background:var(--select-dropdown-background, #ffffff);border:var(--select-dropdown-border, 1px solid #cccccc);border-radius:var(--select-dropdown-border-radius, var(--radius, 4px));box-shadow:var(--select-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));max-height:var(--select-dropdown-max-height, 200px);overflow-y:auto;z-index:var(--select-dropdown-z-index, 10);}\n\n  /* With the search box inside the panel, the PANEL must stop scrolling and\n     the list scroll instead -- otherwise the search box scrolls away as soon\n     as the user moves down the results, which is the one control they still\n     need. The max-height moves down with the scrolling, so the panel keeps\n     growing to fit the search box plus a list of the same height as before. */.select-dropdown.svelte-52lifo:has(> .select-menu-list:where(.svelte-52lifo)) {max-height:none;overflow-y:visible;display:flex;flex-direction:column;}.select-menu-list.svelte-52lifo {max-height:var(--select-dropdown-max-height, 200px);overflow-y:auto;}.select-menu-search.svelte-52lifo {flex:none;margin:var(--select-menu-search-margin, 6px);padding:var(--select-menu-search-padding, 6px 8px);border:var(--select-menu-search-border, 1px solid #cccccc);border-radius:var(--select-menu-search-border-radius, var(--radius, 4px));background:var(--select-menu-search-background, #ffffff);color:var(--select-menu-search-color, inherit);font-family:inherit;font-size:var(--select-menu-search-font-size, inherit);outline:none;}.select-menu-search.svelte-52lifo:focus-visible {border-color:var(--select-menu-search-focus-border-color, #2563eb);box-shadow:var(--select-menu-search-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.select-dropdown-right.svelte-52lifo {left:auto;right:var(--select-dropdown-right, 0);min-width:var(--select-dropdown-min-width, 100%);max-width:var(--select-dropdown-max-width, none);width:var(--select-dropdown-width, max-content);}.select-dropdown.select-dropdown-portal.svelte-52lifo {\n    /* Portaled to <body>: fixed positioning escapes overflow/scroll ancestors\n       (e.g. a table cell). Placement (top/left/width/min-width) is set inline\n       from the trigger rect, so neutralise the in-flow anchoring here. */position:fixed;right:auto;margin-top:0;\n    /* In the root stacking context the panel competes with modals/sheets rather\n       than painting above same-container siblings, so default it into the\n       top-layer band (consumers still override via --select-dropdown-z-index). */z-index:var(--select-dropdown-z-index, 1000);}.select-option.svelte-52lifo {padding:var(--select-option-padding, 8px 12px);color:var(--select-option-color, #333333);font-size:var(--select-option-font-size, inherit);cursor:pointer;transition:background var(--select-option-transition-duration, var(--motion-duration, 0.1s))\n      var(--select-option-transition-easing, var(--motion-easing, ease));}\n\n  /* Per-option leading icon (SelectItem.icon). Kept inline + vertically centred so\n     it needs no change to the option's display and can't regress icon-less lists. */.select-option.svelte-52lifo .select-option-icon {--image-width: var(--select-option-icon-size, 16px);--image-height: var(--select-option-icon-size, 16px);--image-object-fit: contain;color:var(--select-option-icon-color, inherit);vertical-align:middle;margin-right:var(--select-option-icon-gap, 8px);}.select-option.multi.svelte-52lifo {display:flex;align-items:center;gap:var(--select-option-gap, 0);}.select-option.svelte-52lifo:hover,\n  .select-option.highlighted.svelte-52lifo {background:var(--select-option-hover-background, #f0f0f0);color:var(--select-option-hover-color, var(--select-option-color, #333333));}.select-option.selected.svelte-52lifo {background:var(--select-option-selected-background, #e8f0fe);color:var(--select-option-selected-color, var(--select-option-color, #333333));}.select-option-disabled.svelte-52lifo {opacity:var(--select-option-disabled-opacity, 0.4);cursor:var(--select-option-disabled-cursor, not-allowed);pointer-events:none;}.select-option.selected.highlighted.svelte-52lifo {background:var(\n      --select-option-selected-hover-background,\n      var(--select-option-selected-background, #e8f0fe)\n    );}\n\n  /* Pressed feedback comes last, and each selector carries enough specificity\n     to outrank its non-active counterpart above. An option is always hovered\n     when pressed and is often selected too, so a single low-specificity rule\n     earlier in the sheet would be correct in isolation and invisible in\n     practice -- which is how a pressed state ends up shipping as dead CSS.\n     A press on an already-selected row still has to confirm the tap landed. */.select-option.svelte-52lifo:active,\n  .select-option.selected.svelte-52lifo:active,\n  .select-option.selected.highlighted.svelte-52lifo:active {background:var(--select-option-pressed-background, #ededed);}.select-option-indicator.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:var(--select-option-indicator-size, 18px);height:var(--select-option-indicator-size, 18px);border:var(--select-option-indicator-border, 2px solid #757575);border-radius:var(--select-option-indicator-border-radius, var(--radius, 4px));background-color:var(--select-option-indicator-background, transparent);color:var(--select-option-indicator-color, currentColor);transition:background-color\n        var(--select-option-indicator-transition-duration, var(--motion-duration, 0.15s))\n        var(--select-option-indicator-transition-easing, var(--motion-easing, ease)),\n      border-color var(--select-option-indicator-transition-duration, var(--motion-duration, 0.15s))\n        var(--select-option-indicator-transition-easing, var(--motion-easing, ease));}.select-option-indicator.checked.svelte-52lifo {background-color:var(--select-option-indicator-checked-background, #2196f3);border-color:var(--select-option-indicator-checked-border-color, #2196f3);}.select-option-check.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;width:var(--select-option-indicator-check-size, 12px);height:var(--select-option-indicator-check-size, 12px);color:var(--select-option-indicator-check-color, #ffffff);}.select-option-check.svelte-52lifo svg {width:100%;height:100%;}.select-option-indicator.indeterminate.svelte-52lifo {background-color:var(--select-option-indicator-checked-background, #2196f3);border-color:var(--select-option-indicator-checked-border-color, #2196f3);}.select-option-dash.svelte-52lifo {width:var(--select-option-indicator-dash-size, 10px);height:var(--select-option-indicator-dash-thickness, 2px);border-radius:1px;background-color:var(--select-option-indicator-dash-color, #ffffff);}.select-option.select-all.svelte-52lifo {border-bottom:var(--select-all-border, none);font-weight:var(--select-all-font-weight, inherit);}.select-empty.svelte-52lifo {padding:var(--select-empty-padding, 8px 12px);color:var(--select-empty-color, #999999);font-style:var(--select-empty-font-style, italic);font-size:var(--select-empty-font-size, inherit);}.select-bottom-content.svelte-52lifo {border-top:var(--select-bottom-content-border, none);padding:var(--select-bottom-content-padding, 8px 12px);}.select-trigger.svelte-52lifo .pill {--pill-background: var(--select-pill-background, #e0e0e0);--pill-color: var(--select-pill-color, #333333);--pill-border-radius: var(--select-pill-border-radius, 999px);--pill-padding: var(--select-pill-padding, 2px 8px);--pill-font-size: var(--select-pill-font-size, 13px);}\n\n  /* Ghost hierarchy: transparent, borderless trigger */.select.ghost.svelte-52lifo .select-trigger:where(.svelte-52lifo) {background:var(--select-ghost-trigger-background, transparent);border-color:var(--select-ghost-trigger-border-color, transparent);box-shadow:none;}.select.ghost.svelte-52lifo .select-trigger:where(.svelte-52lifo):hover:not(.disabled:where(.svelte-52lifo) .select-trigger:where(.svelte-52lifo)) {border-color:var(--select-ghost-trigger-hover-border-color, transparent);background:var(--select-ghost-trigger-hover-background, rgba(0, 0, 0, 0.04));}.select.ghost.open.svelte-52lifo .select-trigger:where(.svelte-52lifo) {border-color:var(--select-ghost-trigger-open-border-color, transparent);background:var(--select-ghost-trigger-open-background, rgba(0, 0, 0, 0.06));box-shadow:none;}\n\n  /* Single-select right-edge tick (showSelectedTick) */.select-option.tickable.svelte-52lifo {display:flex;align-items:center;gap:8px;}.select-option.tickable.svelte-52lifo .select-option-label:where(.svelte-52lifo) {flex:1 1 auto;min-width:0;}.select-option-tick.svelte-52lifo {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--select-option-tick-size, 16px);height:var(--select-option-tick-size, 16px);color:var(--select-option-tick-color, #2563eb);}.select-option-tick.svelte-52lifo svg {width:100%;height:100%;}\n\n  /* The chevron rotates between closed and open. Small, but it is a transform,\n     and the two end states are each meaningful, so dropping the tween just makes\n     the flip instant. */\n  @media (prefers-reduced-motion: reduce) {.select-arrow.svelte-52lifo {transition:none;}\n  }"
 };
@@ -19773,8 +20192,8 @@ function Select(e, t) {
 		typeof e != "object" || !e || (e.kind === "select-all" ? gn() : mn(e.item.id));
 	}
 	async function vn(e) {
-		let t = get(vt) + e;
-		if (!(t < 0 || t >= get(tn).length) && (set(vt, t), await tick(), get(St) !== null)) {
+		let t = get(vt) + e, n = t >= 0 && t < get(tn).length ? t : at() ? xn(t < 0 ? "last" : "first") : -1;
+		if (!(n < 0) && (set(vt, n, !0), await tick(), get(St) !== null)) {
 			let e = get(St).querySelector(".select-option.highlighted");
 			e instanceof HTMLElement && e.scrollIntoView({ block: "nearest" });
 		}
@@ -19785,30 +20204,33 @@ function Select(e, t) {
 	function bn(e) {
 		return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
 	}
-	async function xn(e) {
-		let t = e === "first" ? get(tn).findIndex(yn) : get(tn).findLastIndex(yn);
+	function xn(e) {
+		return e === "first" ? get(tn).findIndex(yn) : get(tn).findLastIndex(yn);
+	}
+	async function Sn(e) {
+		let t = xn(e);
 		if (!(t < 0) && (set(vt, t, !0), await tick(), get(St) !== null)) {
 			let e = get(St).querySelector(".select-option.highlighted");
 			e instanceof HTMLElement && e.scrollIntoView({ block: "nearest" });
 		}
 	}
-	function Sn(e) {
+	function Cn(e) {
 		if (e.target instanceof HTMLInputElement) {
 			at() || fn();
 			return;
 		}
 		at() ? pn() : fn();
 	}
-	let Cn = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-	function wn() {
-		return get(St) === null ? [] : [...get(St).querySelectorAll(Cn)];
-	}
+	let wn = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 	function Tn() {
+		return get(St) === null ? [] : [...get(St).querySelectorAll(wn)];
+	}
+	function En() {
 		if (get(xt) === null || typeof document > "u") return;
-		let e = [...document.querySelectorAll(Cn)].filter((e) => e.closest(".select-dropdown") === null);
+		let e = [...document.querySelectorAll(wn)].filter((e) => e.closest(".select-dropdown") === null);
 		e.at(e.indexOf(get(xt)) + 1)?.focus();
 	}
-	function En(e) {
+	function Dn(e) {
 		if (!u()) switch (e.key) {
 			case "Enter":
 				e.preventDefault(), at() ? _n() : fn();
@@ -19823,10 +20245,10 @@ function Select(e, t) {
 				e.preventDefault(), vn(-1);
 				break;
 			case "Home":
-				at() && !(e.target instanceof HTMLInputElement) && !bn(e) && (e.preventDefault(), xn("first"));
+				at() && !(e.target instanceof HTMLInputElement) && !bn(e) && (e.preventDefault(), Sn("first"));
 				break;
 			case "End":
-				at() && !(e.target instanceof HTMLInputElement) && !bn(e) && (e.preventDefault(), xn("last"));
+				at() && !(e.target instanceof HTMLInputElement) && !bn(e) && (e.preventDefault(), Sn("last"));
 				break;
 			case "Backspace":
 				if (o() && get(gt) === "" && a().length > 0) {
@@ -19849,22 +20271,22 @@ function Select(e, t) {
 					e.preventDefault(), get(bt)?.focus();
 					break;
 				}
-				t === wn().at(-1) && (e.preventDefault(), pn(), Tn());
+				t === Tn().at(-1) && (e.preventDefault(), pn(), En());
 				break;
 			}
 		}
 	}
-	function Dn(e) {
-		e.target !== get(bt) && En(e);
+	function On(e) {
+		e.target !== get(bt) && Dn(e);
 	}
-	let On = (e) => (e.addEventListener("keydown", Dn), { destroy: () => e.removeEventListener("keydown", Dn) });
-	function kn(e) {
+	let kn = (e) => (e.addEventListener("keydown", On), { destroy: () => e.removeEventListener("keydown", On) });
+	function An(e) {
 		e.target instanceof HTMLInputElement && (set(gt, e.target.value, !0), at() || fn(), set(vt, -1));
 	}
-	function An() {
+	function jn() {
 		!at() && !_t && fn();
 	}
-	function jn(e) {
+	function Mn(e) {
 		return { destroy: registerDismissible({
 			element: () => get(yt),
 			onOutside: (e) => {
@@ -19878,7 +20300,7 @@ function Select(e, t) {
 	onMount(() => () => {
 		at() && Ue()?.();
 	});
-	var Mn = {
+	var Nn = {
 		get items() {
 			return i();
 		},
@@ -20065,8 +20487,8 @@ function Select(e, t) {
 		set name(e) {
 			pt(e), flushSync();
 		}
-	}, Nn = root_18$5();
-	attribute_effect(Nn, () => ({
+	}, Pn = root_18$5();
+	attribute_effect(Pn, () => ({
 		class: `select ${it() ?? "" ?? ""}`,
 		...typeof G() == "string" ? {
 			"data-pw": G(),
@@ -20241,7 +20663,7 @@ function Select(e, t) {
 				typeof C() == "function" && !get(Rt) && e(l);
 			}), append(e, t);
 		};
-		var Pn = child(Nn), Fn = (e) => {
+		var Fn = child(Pn), In = (e) => {
 			var t = comment();
 			each(first_child(t), 16, a, (e) => e, (e, t) => {
 				var n = root_10$15();
@@ -20250,16 +20672,16 @@ function Select(e, t) {
 				}), append(e, n);
 			}), append(e, t);
 		};
-		if_block(Pn, (e) => {
-			typeof pt() == "string" && pt().length > 0 && e(Fn);
+		if_block(Fn, (e) => {
+			typeof pt() == "string" && pt().length > 0 && e(In);
 		});
-		var In = sibling(Pn, 2);
+		var Ln = sibling(Fn, 2);
 		let t;
-		var Ln = child(In);
-		attribute_effect(Ln, () => ({
+		var Rn = child(Ln);
+		attribute_effect(Rn, () => ({
 			class: "select-trigger",
-			onclick: Sn,
-			onkeydown: En,
+			onclick: Cn,
+			onkeydown: Dn,
 			role: "combobox",
 			"aria-expanded": at(),
 			"aria-haspopup": "listbox",
@@ -20269,7 +20691,7 @@ function Select(e, t) {
 			...get(rn) === null ? {} : { "aria-activedescendant": get(rn) },
 			tabindex: u() || get(Lt) ? -1 : 0
 		}), void 0, void 0, void 0, "svelte-52lifo");
-		var Rn = child(Ln), zn = (e) => {
+		var zn = child(Rn), Bn = (e) => {
 			Img(e, spread_props({
 				inlineSvg: !0,
 				get src() {
@@ -20280,10 +20702,10 @@ function Select(e, t) {
 				classes: "select-left-icon"
 			}, () => typeof dt() == "string" ? { testId: dt() } : {}));
 		};
-		if_block(Rn, (e) => {
-			typeof ut() == "string" && ut().length > 0 && e(zn);
+		if_block(zn, (e) => {
+			typeof ut() == "string" && ut().length > 0 && e(Bn);
 		});
-		var Bn = sibling(Rn, 2), Vn = (e) => {
+		var Vn = sibling(zn, 2), Hn = (e) => {
 			var t = comment(), n = first_child(t), i = (e) => {
 				var t = root_9$16(), n = first_child(t);
 				snippet(n, re, () => ({
@@ -20294,7 +20716,7 @@ function Select(e, t) {
 					var t = root_11$13();
 					remove_input_defaults(t), bind_this(t, (e) => set(bt, e), () => get(bt)), template_effect(() => {
 						set_value(t, get(gt)), set_attribute(t, "placeholder", a().length === 0 ? l() : ""), t.disabled = u(), set_attribute(t, "aria-invalid", get(zt).ariaInvalid), set_attribute(t, "aria-describedby", get(zt).describedBy), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
-					}), delegated("input", t, kn), event("focus", t, An), append(e, t);
+					}), delegated("input", t, An), event("focus", t, jn), append(e, t);
 				};
 				if_block(i, (e) => {
 					get(Lt) && e(o);
@@ -20320,7 +20742,7 @@ function Select(e, t) {
 					var t = root_11$13();
 					remove_input_defaults(t), bind_this(t, (e) => set(bt, e), () => get(bt)), template_effect(() => {
 						set_value(t, get(gt)), set_attribute(t, "placeholder", a().length === 0 ? l() : ""), t.disabled = u(), set_attribute(t, "aria-invalid", get(zt).ariaInvalid), set_attribute(t, "aria-describedby", get(zt).describedBy), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
-					}), delegated("input", t, kn), event("focus", t, An), append(e, t);
+					}), delegated("input", t, An), event("focus", t, jn), append(e, t);
 				}, s = (e) => {
 					var t = root_12$12(), n = child(t, !0);
 					reset(t), template_effect(() => set_text(n, l())), append(e, t);
@@ -20332,23 +20754,23 @@ function Select(e, t) {
 			if_block(n, (e) => {
 				typeof re() == "function" ? e(i) : e(o, -1);
 			}), append(e, t);
-		}, Hn = (e) => {
+		}, Un = (e) => {
 			var t = root_11$13();
 			remove_input_defaults(t), bind_this(t, (e) => set(bt, e), () => get(bt)), template_effect(() => {
 				set_value(t, at() ? get(gt) : get(nn)), set_attribute(t, "placeholder", get(an)), t.disabled = u(), set_attribute(t, "aria-invalid", get(zt).ariaInvalid), set_attribute(t, "aria-describedby", get(zt).describedBy), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-search` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-search` : null);
-			}), delegated("input", t, kn), event("focus", t, An), append(e, t);
-		}, Un = (e) => {
+			}), delegated("input", t, An), event("focus", t, jn), append(e, t);
+		}, Wn = (e) => {
 			var t = root_13$10(), n = child(t, !0);
 			reset(t), template_effect(() => {
 				set_class(t, 1, clsx(get(nn).length > 0 ? "select-value" : "select-placeholder"), "svelte-52lifo"), set_text(n, get(nn).length > 0 ? get(nn) : l());
 			}), append(e, t);
 		};
-		if_block(Bn, (e) => {
-			o() ? e(Vn) : get(Lt) ? e(Hn, 1) : e(Un, -1);
+		if_block(Vn, (e) => {
+			o() ? e(Hn) : get(Lt) ? e(Un, 1) : e(Wn, -1);
 		});
-		var Wn = sibling(Bn, 2);
-		html(Wn, () => chevron_down_default, !0), reset(Wn), reset(Ln), bind_this(Ln, (e) => set(xt, e), () => get(xt));
-		var Gn = sibling(Ln, 2), Kn = (e) => {
+		var Gn = sibling(Vn, 2);
+		html(Gn, () => chevron_down_default, !0), reset(Gn), reset(Rn), bind_this(Rn, (e) => set(xt, e), () => get(xt));
+		var Kn = sibling(Rn, 2), qn = (e) => {
 			var t = root_14$9();
 			template_effect(() => {
 				set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-clear` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-clear` : null);
@@ -20356,19 +20778,19 @@ function Select(e, t) {
 				(e.key === "Enter" || e.key === " ") && e.stopPropagation();
 			}), delegated("click", t, Ht), append(e, t);
 		};
-		if_block(Gn, (e) => {
-			get(Bt) && e(Kn);
-		}), reset(In);
-		var qn = sibling(In, 2), Jn = (e) => {
+		if_block(Kn, (e) => {
+			get(Bt) && e(qn);
+		}), reset(Ln);
+		var Jn = sibling(Ln, 2), Yn = (e) => {
 			var t = root_15$7(), n = child(t, !0);
 			reset(t), template_effect(() => {
 				set_attribute(t, "id", get(zt).errorId), set_attribute(t, "data-pw", typeof G() == "string" ? `${G()}-error-message` : null), set_attribute(t, "testid", typeof G() == "string" ? `${G()}-error-message` : null), set_text(n, p());
 			}), append(e, t);
 		};
-		if_block(qn, (e) => {
-			get(zt).showsError && e(Jn);
+		if_block(Jn, (e) => {
+			get(zt).showsError && e(Yn);
 		});
-		var Yn = sibling(qn, 2), Xn = (t) => {
+		var Xn = sibling(Jn, 2), Zn = (t) => {
 			var n = comment(), i = first_child(n), a = (t) => {
 				var n = root_16$6();
 				let i;
@@ -20382,18 +20804,18 @@ function Select(e, t) {
 				};
 				if_block(c, (e) => {
 					typeof C() == "function" && e(u);
-				}), reset(n), action(n, (e) => dn?.(e)), bind_this(n, (e) => set(St, e), () => get(St)), effect(() => bind_element_size(n, "clientWidth", (e) => set(Ct, e))), effect(() => bind_element_size(n, "clientHeight", (e) => set(wt, e))), action(n, (e) => On?.(e)), action(n, (e) => sn?.(e)), action(n, (e) => jn?.(e)), template_effect(() => {
+				}), reset(n), action(n, (e) => dn?.(e)), bind_this(n, (e) => set(St, e), () => get(St)), effect(() => bind_element_size(n, "clientWidth", (e) => set(Ct, e))), effect(() => bind_element_size(n, "clientHeight", (e) => set(wt, e))), action(n, (e) => kn?.(e)), action(n, (e) => sn?.(e)), action(n, (e) => Mn?.(e)), template_effect(() => {
 					i = set_class(n, 1, "select-dropdown svelte-52lifo", null, i, {
 						"select-dropdown-right": get(Nt) === "right",
 						"select-dropdown-up": !ft() && (get(un) === "top-left" || get(un) === "top-right"),
 						"select-dropdown-measuring": get(Mt),
 						"select-dropdown-portal": ft()
 					}), set_attribute(n, "data-placement", get(un)), set_style(n, get(ln)), set_value(a, get(gt)), set_attribute(a, "placeholder", l().length > 0 ? l() : "Search"), set_attribute(a, "aria-controls", It), set_attribute(a, "data-pw", typeof G() == "string" ? `${G()}-menu-search` : null), set_attribute(a, "testid", typeof G() == "string" ? `${G()}-menu-search` : null), set_attribute(s, "id", It), set_attribute(s, "aria-multiselectable", o());
-				}), delegated("input", a, kn), delegated("keydown", a, En), append(t, n);
+				}), delegated("input", a, An), delegated("keydown", a, Dn), append(t, n);
 			}, s = (t) => {
-				var n = root_17$5();
+				var n = root_17$6();
 				let i;
-				e(child(n)), reset(n), action(n, (e) => dn?.(e)), bind_this(n, (e) => set(St, e), () => get(St)), effect(() => bind_element_size(n, "clientWidth", (e) => set(Ct, e))), effect(() => bind_element_size(n, "clientHeight", (e) => set(wt, e))), action(n, (e) => sn?.(e)), action(n, (e) => jn?.(e)), template_effect(() => {
+				e(child(n)), reset(n), action(n, (e) => dn?.(e)), bind_this(n, (e) => set(St, e), () => get(St)), effect(() => bind_element_size(n, "clientWidth", (e) => set(Ct, e))), effect(() => bind_element_size(n, "clientHeight", (e) => set(wt, e))), action(n, (e) => sn?.(e)), action(n, (e) => Mn?.(e)), template_effect(() => {
 					i = set_class(n, 1, "select-dropdown svelte-52lifo", null, i, {
 						"select-dropdown-right": get(Nt) === "right",
 						"select-dropdown-up": !ft() && (get(un) === "top-left" || get(un) === "top-right"),
@@ -20406,11 +20828,11 @@ function Select(e, t) {
 				get(Rt) ? e(a) : e(s, -1);
 			}), append(t, n);
 		};
-		if_block(Yn, (e) => {
-			at() && !u() && e(Xn);
-		}), reset(Nn), bind_this(Nn, (e) => set(yt, e), () => get(yt)), template_effect(() => t = set_class(In, 1, "select-control svelte-52lifo", null, t, { "has-clear": get(Bt) }));
+		if_block(Xn, (e) => {
+			at() && !u() && e(Zn);
+		}), reset(Pn), bind_this(Pn, (e) => set(yt, e), () => get(yt)), template_effect(() => t = set_class(Ln, 1, "select-control svelte-52lifo", null, t, { "has-clear": get(Bt) }));
 	}
-	return append(e, Nn), pop(Mn);
+	return append(e, Pn), pop(Nn);
 }
 delegate([
 	"input",
@@ -21167,7 +21589,7 @@ customElements.define("sui-snippet", create_custom_element(Snippet_wc, {
 //#region src/lib/assets/chevron-down-sm.svg?raw
 var chevron_down_sm_default = "<svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M1 1L5 5L9 1\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$46 = /* @__PURE__ */ from_html("<span class=\"split-button-arrow svelte-2cti\"><!></span>"), root_1$43 = /* @__PURE__ */ from_html("<div><div class=\"split-button-primary svelte-2cti\"><!></div> <div class=\"split-button-trigger svelte-2cti\"><!></div></div>"), $$css$89 = {
 	hash: "svelte-2cti",
-	code: ".split-button.svelte-2cti {display:inline-flex;position:relative;gap:var(--split-button-gap, 0px);}.split-button.disabled.svelte-2cti .split-button-trigger:where(.svelte-2cti) {pointer-events:none;}.split-button-primary.svelte-2cti {--button-color: var(--split-button-primary-background, #3a4550);--button-text-color: var(--split-button-primary-color, white);--button-padding: var(--split-button-primary-padding, 8px 16px);--button-font-size: var(--split-button-primary-font-size, 14px);--button-font-weight: var(--split-button-primary-font-weight, 500);--button-font-family: var(--split-button-primary-font-family);--button-border: var(--split-button-primary-border, none);--button-border-radius: var(\n      --split-button-primary-border-radius,\n      var(--radius, 4px) 0 0 var(--radius, 4px)\n    );--button-hover-color: var(\n      --split-button-primary-hover-background,\n      var(--split-button-primary-background, #3a4550)\n    );--button-hover-text-color: var(\n      --split-button-primary-hover-color,\n      var(--split-button-primary-color, white)\n    );--disabled-opacity: var(--split-button-disabled-opacity, 0.4);--disabled-cursor: var(--split-button-disabled-cursor, not-allowed);display:flex;}.split-button-trigger.svelte-2cti {--menu-container-position: static;--menu-container-display: flex;--menu-trigger-focus-outline: none;--menu-dropdown-left: 0;--menu-min-width: 100%;border-left:var(--split-button-trigger-separator, 1px solid rgba(255, 255, 255, 0.3));display:flex;align-items:stretch;background-color:var(--split-button-trigger-background, #3a4550);border-radius:var(\n      --split-button-trigger-border-radius,\n      0 var(--radius, 4px) var(--radius, 4px) 0\n    );color:var(--split-button-trigger-color, white);cursor:pointer;}.split-button.disabled.svelte-2cti .split-button-trigger:where(.svelte-2cti) {opacity:var(--split-button-disabled-opacity, 0.4);cursor:var(--split-button-disabled-cursor, not-allowed);}.split-button-trigger.svelte-2cti:hover {background-color:var(\n      --split-button-trigger-hover-background,\n      var(--split-button-trigger-background, #3a4550)\n    );color:var(--split-button-trigger-hover-color, var(--split-button-trigger-color, white));}.split-button-trigger.svelte-2cti .menu-trigger {display:flex;align-items:center;justify-content:center;padding:var(--split-button-trigger-padding, 8px);}.split-button-arrow.svelte-2cti {display:inline-flex;width:var(--split-button-arrow-width, 10px);height:var(--split-button-arrow-height, 6px);}.split-button-arrow.svelte-2cti svg {width:100%;height:100%;}"
+	code: ".split-button.svelte-2cti {display:inline-flex;position:relative;gap:var(--split-button-gap, 0px);}.split-button.disabled.svelte-2cti .split-button-trigger:where(.svelte-2cti) {pointer-events:none;}.split-button-primary.svelte-2cti {--button-color: var(--split-button-primary-background, #3a4550);--button-text-color: var(--split-button-primary-color, white);--button-padding: var(--split-button-primary-padding, 8px 16px);--button-font-size: var(--split-button-primary-font-size, 14px);--button-font-weight: var(--split-button-primary-font-weight, 500);--button-font-family: var(--split-button-primary-font-family);--button-border: var(--split-button-primary-border, none);--button-border-radius: var(\n      --split-button-primary-border-radius,\n      var(--radius, 4px) 0 0 var(--radius, 4px)\n    );--button-hover-color: var(\n      --split-button-primary-hover-background,\n      var(--split-button-primary-background, #3a4550)\n    );--button-hover-text-color: var(\n      --split-button-primary-hover-color,\n      var(--split-button-primary-color, white)\n    );--disabled-opacity: var(--split-button-disabled-opacity, 0.4);--disabled-cursor: var(--split-button-disabled-cursor, not-allowed);display:flex;}.split-button-trigger.svelte-2cti {--menu-container-position: static;--menu-container-display: flex;\n    /* Used to force --menu-trigger-focus-outline to `none` with nothing\n       standing in for it (WCAG 2.4.7) -- removed so the trigger falls\n       through to Menu's own :focus-visible default instead of suppressing\n       it. See Menu.svelte's .menu-trigger:focus-visible for the fix. */--menu-dropdown-left: 0;--menu-min-width: 100%;border-left:var(--split-button-trigger-separator, 1px solid rgba(255, 255, 255, 0.3));display:flex;align-items:stretch;background-color:var(--split-button-trigger-background, #3a4550);border-radius:var(\n      --split-button-trigger-border-radius,\n      0 var(--radius, 4px) var(--radius, 4px) 0\n    );color:var(--split-button-trigger-color, white);cursor:pointer;}.split-button.disabled.svelte-2cti .split-button-trigger:where(.svelte-2cti) {opacity:var(--split-button-disabled-opacity, 0.4);cursor:var(--split-button-disabled-cursor, not-allowed);}.split-button-trigger.svelte-2cti:hover {background-color:var(\n      --split-button-trigger-hover-background,\n      var(--split-button-trigger-background, #3a4550)\n    );color:var(--split-button-trigger-hover-color, var(--split-button-trigger-color, white));}.split-button-trigger.svelte-2cti .menu-trigger {display:flex;align-items:center;justify-content:center;padding:var(--split-button-trigger-padding, 8px);}.split-button-arrow.svelte-2cti {display:inline-flex;width:var(--split-button-arrow-width, 10px);height:var(--split-button-arrow-height, 6px);}.split-button-arrow.svelte-2cti svg {width:100%;height:100%;}"
 };
 function SplitButton(e, t) {
 	push(t, !0), append_styles$1(e, $$css$89);
@@ -21379,7 +21801,7 @@ var normalizeColumns = (e, t) => ({
 	let t = asJsonObject(e);
 	if (t === null) return null;
 	let n = {};
-	return typeof t.primary == "string" && (n.primary = t.primary), typeof t.comparison == "string" && (n.comparison = t.comparison), typeof t.trendPercent == "number" && (n.trendPercent = t.trendPercent), typeof t.trendLabel == "string" && (n.trendLabel = t.trendLabel), n;
+	return typeof t.primary == "string" && (n.primary = t.primary), typeof t.comparison == "string" && (n.comparison = t.comparison), typeof t.trendPercent == "number" && (n.trendPercent = t.trendPercent), typeof t.trendLabel == "string" && (n.trendLabel = t.trendLabel), typeof t.animateTrend == "boolean" && (n.animateTrend = t.animateTrend), n;
 }, asLinkCellData = (e) => {
 	if (typeof e == "string" && e.length > 0) return { url: e };
 	let t = asJsonObject(e);
@@ -21464,7 +21886,7 @@ var normalizeColumns = (e, t) => ({
 		})),
 		rest: n.length - i.length
 	};
-}, trend_up_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <path d=\"M2 11.5L6.5 7L9 9.5L14 4.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9.5 4.5H14V9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", trend_down_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <path d=\"M2 4.5L6.5 9L9 6.5L14 11.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9.5 11.5H14V7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", dots_vertical_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n  <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n  <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n</svg>\n", root$45 = /* @__PURE__ */ from_html("<div><span class=\"builtin-primary-text svelte-4boxsj\"> </span> <!></div>"), root_1$42 = /* @__PURE__ */ from_html("<div><span class=\"builtin-primary-text svelte-4boxsj\"> </span> <span class=\"builtin-secondary-text svelte-4boxsj\"> </span></div>"), root_2$32 = /* @__PURE__ */ from_html("<span class=\"builtin-icon-label-icon svelte-4boxsj\"><!></span>"), root_3$29 = /* @__PURE__ */ from_html("<div><!> <span> </span></div>"), root_4$25 = /* @__PURE__ */ from_html("<span class=\"builtin-thumb svelte-4boxsj\"><!></span>"), root_5$24 = /* @__PURE__ */ from_html("<span class=\"builtin-thumb builtin-thumb-placeholder svelte-4boxsj\"> </span>"), root_6$22 = /* @__PURE__ */ from_html("<div><!> <div><span class=\"builtin-primary-text svelte-4boxsj\"> </span> <span class=\"builtin-secondary-text svelte-4boxsj\"> </span></div></div>"), root_7$20 = /* @__PURE__ */ from_html("<div></div>"), root_8$18 = /* @__PURE__ */ from_html("<span class=\"builtin-avatar-rest svelte-4boxsj\"> </span>"), root_9$15 = /* @__PURE__ */ from_html("<div><!> <!></div>"), root_10$14 = /* @__PURE__ */ from_html("<span class=\"builtin-primary-text svelte-4boxsj\"> </span>"), root_11$12 = /* @__PURE__ */ from_html("<span class=\"builtin-secondary-text svelte-4boxsj\"> </span>"), root_12$11 = /* @__PURE__ */ from_html("<span class=\"builtin-trend builtin-trend-up svelte-4boxsj\"><span class=\"builtin-trend-icon svelte-4boxsj\"></span> </span>"), root_13$9 = /* @__PURE__ */ from_html("<span class=\"builtin-trend builtin-trend-down svelte-4boxsj\"><span class=\"builtin-trend-icon svelte-4boxsj\"></span> </span>"), root_14$8 = /* @__PURE__ */ from_html("<span class=\"builtin-trend builtin-trend-flat svelte-4boxsj\">↔ 0%</span>"), root_15$6 = /* @__PURE__ */ from_html("<span class=\"builtin-trend builtin-trend-flat svelte-4boxsj\"> </span>"), root_16$5 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_17$4 = /* @__PURE__ */ from_html("<span class=\"builtin-toggle svelte-4boxsj\" role=\"switch\"><!></span>"), root_18$4 = /* @__PURE__ */ from_html("<span class=\"builtin-interactive svelte-4boxsj\"><!></span>"), root_19$4 = /* @__PURE__ */ from_html("<img class=\"builtin-input-icon svelte-4boxsj\" alt=\"\"/>"), root_20$4 = /* @__PURE__ */ from_html("<img class=\"builtin-button-icon svelte-4boxsj\" alt=\"\"/>"), root_21$3 = /* @__PURE__ */ from_html("<span><!></span>"), root_22$3 = /* @__PURE__ */ from_html("<span class=\"builtin-menu-dots svelte-4boxsj\"></span>"), root_23$3 = /* @__PURE__ */ from_html("<span class=\"builtin-icon-button svelte-4boxsj\"><!></span>"), root_24$3 = /* @__PURE__ */ from_html("<span class=\"builtin-interactive builtin-action-group svelte-4boxsj\"><!> <!></span>"), root_25$2 = /* @__PURE__ */ from_html("<span class=\"builtin-copy-icon svelte-4boxsj\"></span>"), root_26$2 = /* @__PURE__ */ from_html("<span class=\"builtin-link-copied svelte-4boxsj\">Copied</span>"), root_27$1 = /* @__PURE__ */ from_html("<span class=\"builtin-link-copy svelte-4boxsj\"><!></span> <!>", 1), root_28$1 = /* @__PURE__ */ from_html("<div class=\"builtin-link svelte-4boxsj\"><a target=\"_blank\" rel=\"noopener noreferrer\" class=\"builtin-link-anchor svelte-4boxsj\"> </a> <!></div>"), $$css$87 = {
+}, trend_up_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <path d=\"M2 11.5L6.5 7L9 9.5L14 4.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9.5 4.5H14V9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", trend_down_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <path d=\"M2 4.5L6.5 9L9 6.5L14 11.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M9.5 11.5H14V7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", dots_vertical_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"none\">\n  <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n  <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n  <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n</svg>\n", root$45 = /* @__PURE__ */ from_html("<div><span class=\"builtin-primary-text svelte-4boxsj\"> </span> <!></div>"), root_1$42 = /* @__PURE__ */ from_html("<div><span class=\"builtin-primary-text svelte-4boxsj\"> </span> <span class=\"builtin-secondary-text svelte-4boxsj\"> </span></div>"), root_2$32 = /* @__PURE__ */ from_html("<span class=\"builtin-icon-label-icon svelte-4boxsj\"><!></span>"), root_3$29 = /* @__PURE__ */ from_html("<div><!> <span> </span></div>"), root_4$25 = /* @__PURE__ */ from_html("<span class=\"builtin-thumb svelte-4boxsj\"><!></span>"), root_5$24 = /* @__PURE__ */ from_html("<span class=\"builtin-thumb builtin-thumb-placeholder svelte-4boxsj\"> </span>"), root_6$22 = /* @__PURE__ */ from_html("<div><!> <div><span class=\"builtin-primary-text svelte-4boxsj\"> </span> <span class=\"builtin-secondary-text svelte-4boxsj\"> </span></div></div>"), root_7$20 = /* @__PURE__ */ from_html("<div></div>"), root_8$18 = /* @__PURE__ */ from_html("<span class=\"builtin-avatar-rest svelte-4boxsj\"> </span>"), root_9$15 = /* @__PURE__ */ from_html("<div><!> <!></div>"), root_10$14 = /* @__PURE__ */ from_html("<span class=\"builtin-primary-text svelte-4boxsj\"> </span>"), root_11$12 = /* @__PURE__ */ from_html("<span class=\"builtin-secondary-text svelte-4boxsj\"> </span>"), root_12$11 = /* @__PURE__ */ from_html("<span class=\"builtin-trend builtin-trend-up svelte-4boxsj\"><span class=\"builtin-trend-icon svelte-4boxsj\"></span> <!></span>"), root_13$9 = /* @__PURE__ */ from_html("<span class=\"builtin-trend builtin-trend-down svelte-4boxsj\"><span class=\"builtin-trend-icon svelte-4boxsj\"></span> <!></span>"), root_14$8 = /* @__PURE__ */ from_html("<span class=\"builtin-trend builtin-trend-flat svelte-4boxsj\">↔ 0%</span>"), root_15$6 = /* @__PURE__ */ from_html("<span class=\"builtin-trend builtin-trend-flat svelte-4boxsj\"> </span>"), root_16$5 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_17$5 = /* @__PURE__ */ from_html("<span class=\"builtin-toggle svelte-4boxsj\" role=\"switch\"><!></span>"), root_18$4 = /* @__PURE__ */ from_html("<span class=\"builtin-interactive svelte-4boxsj\"><!></span>"), root_19$4 = /* @__PURE__ */ from_html("<img class=\"builtin-input-icon svelte-4boxsj\" alt=\"\"/>"), root_20$4 = /* @__PURE__ */ from_html("<img class=\"builtin-button-icon svelte-4boxsj\" alt=\"\"/>"), root_21$3 = /* @__PURE__ */ from_html("<span><!></span>"), root_22$3 = /* @__PURE__ */ from_html("<span class=\"builtin-menu-dots svelte-4boxsj\"></span>"), root_23$3 = /* @__PURE__ */ from_html("<span class=\"builtin-icon-button svelte-4boxsj\"><!></span>"), root_24$3 = /* @__PURE__ */ from_html("<span class=\"builtin-interactive builtin-action-group svelte-4boxsj\"><!> <!></span>"), root_25$2 = /* @__PURE__ */ from_html("<span class=\"builtin-copy-icon svelte-4boxsj\"></span>"), root_26$2 = /* @__PURE__ */ from_html("<span class=\"builtin-link-copied svelte-4boxsj\">Copied</span>"), root_27$1 = /* @__PURE__ */ from_html("<span class=\"builtin-link-copy svelte-4boxsj\"><!></span> <!>", 1), root_28$1 = /* @__PURE__ */ from_html("<div class=\"builtin-link svelte-4boxsj\"><a target=\"_blank\" rel=\"noopener noreferrer\" class=\"builtin-link-anchor svelte-4boxsj\"> </a> <!></div>"), $$css$87 = {
 	hash: "svelte-4boxsj",
 	code: ".builtin-primary-text.svelte-4boxsj {display:block;font-size:var(--table-cell-primary-font-size, var(--table-content-font-size, 14px));color:var(--table-cell-primary-color, var(--table-content-color, #111827));}.builtin-secondary-text.svelte-4boxsj {display:block;font-size:var(--table-cell-secondary-font-size, 12px);color:var(--table-cell-secondary-color, #6b7280);}.builtin-two-line.svelte-4boxsj,\n  .builtin-compare.svelte-4boxsj {display:flex;flex-direction:column;gap:var(--table-cell-line-gap, 2px);}\n\n  /* column.align lands on the td as text-align, which flex layouts ignore.\n     Column-flex builtins follow it via align-items… */.builtin-two-line.builtin-align-end.svelte-4boxsj,\n  .builtin-compare.builtin-align-end.svelte-4boxsj {align-items:flex-end;}.builtin-two-line.builtin-align-center.svelte-4boxsj,\n  .builtin-compare.builtin-align-center.svelte-4boxsj {align-items:center;}\n\n  /* …and row-flex builtins follow it via justify-content. */.builtin-text-tag.builtin-align-end.svelte-4boxsj,\n  .builtin-icon-label.builtin-align-end.svelte-4boxsj,\n  .builtin-image-two-line.builtin-align-end.svelte-4boxsj,\n  .builtin-tag-array.builtin-align-end.svelte-4boxsj,\n  .builtin-avatar-stack.builtin-align-end.svelte-4boxsj {justify-content:flex-end;}.builtin-text-tag.builtin-align-center.svelte-4boxsj,\n  .builtin-icon-label.builtin-align-center.svelte-4boxsj,\n  .builtin-image-two-line.builtin-align-center.svelte-4boxsj,\n  .builtin-tag-array.builtin-align-center.svelte-4boxsj,\n  .builtin-avatar-stack.builtin-align-center.svelte-4boxsj {justify-content:center;}.builtin-text-tag.svelte-4boxsj {display:flex;align-items:center;gap:var(--table-cell-inline-gap, 8px);}.builtin-icon-label.svelte-4boxsj {display:flex;align-items:center;gap:var(--table-cell-inline-gap, 8px);}.builtin-icon-label-icon.svelte-4boxsj img,\n  .builtin-icon-label-icon.svelte-4boxsj svg {width:var(--table-cell-icon-size, 16px);height:var(--table-cell-icon-size, 16px);color:var(--table-cell-icon-color, inherit);display:block;}.builtin-image-two-line.svelte-4boxsj {display:flex;align-items:center;gap:var(--table-cell-inline-gap, 8px);}.builtin-thumb.svelte-4boxsj {display:inline-flex;width:var(--table-cell-thumb-size, 32px);height:var(--table-cell-thumb-size, 32px);border-radius:var(--table-cell-thumb-radius, var(--radius, 4px));overflow:hidden;flex-shrink:0;}.builtin-thumb.svelte-4boxsj img {width:100%;height:100%;object-fit:cover;}.builtin-thumb-placeholder.svelte-4boxsj {display:flex;align-items:center;justify-content:center;background-color:var(--table-cell-thumb-placeholder-background, #f3f4f6);color:var(--table-cell-thumb-placeholder-color, #4b5563);font-size:var(--table-cell-thumb-placeholder-font-size, 14px);font-weight:600;line-height:1;text-transform:uppercase;}.builtin-tag-array.svelte-4boxsj {display:flex;flex-wrap:wrap;gap:var(--table-tag-array-gap, 4px);}.builtin-avatar-stack.svelte-4boxsj {display:flex;align-items:center;gap:var(--table-cell-inline-gap, 8px);}.builtin-avatar-rest.svelte-4boxsj {font-size:var(--table-cell-secondary-font-size, 12px);color:var(--table-cell-secondary-color, #6b7280);}.builtin-trend.svelte-4boxsj {display:inline-flex;align-items:center;gap:var(--table-trend-gap, 4px);font-size:var(--table-cell-secondary-font-size, 12px);}.builtin-trend-up.svelte-4boxsj {color:var(--table-trend-up-color, #166534);}.builtin-trend-down.svelte-4boxsj {color:var(--table-trend-down-color, #dc2626);}.builtin-trend-flat.svelte-4boxsj {color:var(--table-trend-flat-color, #6b7280);}.builtin-trend-icon.svelte-4boxsj svg {width:var(--table-trend-icon-size, 12px);height:var(--table-trend-icon-size, 12px);display:block;}.builtin-toggle.svelte-4boxsj {display:inline-flex;align-items:center;}.builtin-interactive.svelte-4boxsj {display:inline-flex;align-items:center;min-width:0;width:var(--table-interactive-width, auto);}.builtin-input-icon.svelte-4boxsj {display:block;width:var(--table-cell-input-icon-size, 16px);height:var(--table-cell-input-icon-size, 16px);}.builtin-button-icon.svelte-4boxsj {display:block;width:var(--table-cell-icon-size, 16px);height:var(--table-cell-icon-size, 16px);}.builtin-action-group.svelte-4boxsj {gap:var(--table-cell-inline-gap, 8px);}.builtin-icon-button.svelte-4boxsj {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-width: fit-content;--button-height: fit-content;--button-text-color: var(--table-cell-icon-button-color, #6b7280);--button-hover-color: var(--table-cell-icon-button-hover-background, rgba(0, 0, 0, 0.05));display:inline-flex;}.builtin-menu-dots.svelte-4boxsj svg {width:var(--table-cell-icon-size, 16px);height:var(--table-cell-icon-size, 16px);display:block;}.builtin-link.svelte-4boxsj {display:flex;align-items:center;gap:var(--table-cell-inline-gap, 8px);min-width:0;}.builtin-link-anchor.svelte-4boxsj {color:var(--table-link-color, #2563eb);text-decoration:var(--table-link-decoration, underline);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}.builtin-link-copy.svelte-4boxsj {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-width: fit-content;--button-height: fit-content;--button-text-color: var(--table-link-copy-color, #6b7280);--button-hover-color: var(--table-link-copy-hover-background, rgba(0, 0, 0, 0.05));display:inline-flex;flex-shrink:0;}.builtin-copy-icon.svelte-4boxsj svg {width:var(--table-cell-icon-size, 16px);height:var(--table-cell-icon-size, 16px);display:block;}.builtin-link-copied.svelte-4boxsj {font-size:var(--table-cell-secondary-font-size, 12px);color:var(--table-cell-secondary-color, #6b7280);flex-shrink:0;}"
 };
@@ -21735,16 +22157,40 @@ function BuiltinCell(e, t) {
 					var n = comment(), i = first_child(n), a = (e) => {
 						var n = root_12$11(), i = child(n);
 						html(i, () => trend_up_default, !0), reset(i);
-						var a = sibling(i);
-						reset(n), template_effect((e, i) => {
-							set_attribute(n, "data-pw", e), set_attribute(n, "testid", i), set_text(a, ` ${get(t).trendPercent ?? ""}%`);
+						var a = sibling(i, 2), o = (e) => {
+							{
+								let n = /* @__PURE__ */ user_derived(() => `${get(t).trendPercent}%`);
+								AnimatedNumber(e, { get value() {
+									return get(n);
+								} });
+							}
+						}, s = (e) => {
+							var n = text();
+							template_effect(() => set_text(n, `${get(t).trendPercent ?? ""}%`)), append(e, n);
+						};
+						if_block(a, (e) => {
+							get(t).animateTrend ? e(o) : e(s, -1);
+						}), reset(n), template_effect((e, t) => {
+							set_attribute(n, "data-pw", e), set_attribute(n, "testid", t);
 						}, [() => u("trendUp"), () => u("trendUp")]), append(e, n);
 					}, o = (e) => {
 						var n = root_13$9(), i = child(n);
 						html(i, () => trend_down_default, !0), reset(i);
-						var a = sibling(i);
-						reset(n), template_effect((e, i) => {
-							set_attribute(n, "data-pw", e), set_attribute(n, "testid", i), set_text(a, ` ${get(t).trendPercent ?? ""}%`);
+						var a = sibling(i, 2), o = (e) => {
+							{
+								let n = /* @__PURE__ */ user_derived(() => `${get(t).trendPercent}%`);
+								AnimatedNumber(e, { get value() {
+									return get(n);
+								} });
+							}
+						}, s = (e) => {
+							var n = text();
+							template_effect(() => set_text(n, `${get(t).trendPercent ?? ""}%`)), append(e, n);
+						};
+						if_block(a, (e) => {
+							get(t).animateTrend ? e(o) : e(s, -1);
+						}), reset(n), template_effect((e, t) => {
+							set_attribute(n, "data-pw", e), set_attribute(n, "testid", t);
 						}, [() => u("trendDown"), () => u("trendDown")]), append(e, n);
 					}, s = (e) => {
 						append(e, root_14$8());
@@ -21772,7 +22218,7 @@ function BuiltinCell(e, t) {
 		}), append(e, t);
 	}, at = (e) => {
 		let t = /* @__PURE__ */ user_derived(() => asJsonObject(i()) ?? {}), s = /* @__PURE__ */ user_derived(() => get(t).checked === !0);
-		var c = root_17$4();
+		var c = root_17$5();
 		set_attribute(c, "tabindex", -1), Toggle(child(c), {
 			get checked() {
 				return get(s);
@@ -22176,7 +22622,7 @@ delegate(["click", "keydown"]), create_custom_element(BuiltinCell, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/assets/sort-default.svg?raw
-var sort_default_default = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z\" fill=\"currentColor\"/>\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z\" fill=\"currentColor\"/>\n</svg>\n", root$44 = /* @__PURE__ */ from_html("<div class=\"table-title svelte-171ci2i\"> </div>"), root_1$41 = /* @__PURE__ */ from_html("<button class=\"table-search-clear svelte-171ci2i\" type=\"button\"></button>"), root_2$31 = /* @__PURE__ */ from_html("<div class=\"table-search svelte-171ci2i\"><span class=\"table-search-icon svelte-171ci2i\"></span> <input class=\"table-search-input svelte-171ci2i\" type=\"search\" autocomplete=\"off\"/> <!></div>"), root_3$28 = /* @__PURE__ */ from_html("<div class=\"table-toolbar svelte-171ci2i\"><!></div>"), root_4$24 = /* @__PURE__ */ from_html("<caption class=\"sr-only svelte-171ci2i\"> </caption>"), root_5$23 = /* @__PURE__ */ from_html("<th><!></th>"), root_6$21 = /* @__PURE__ */ from_html("<th></th>"), root_7$19 = /* @__PURE__ */ from_html("<th> </th>"), root_8$17 = /* @__PURE__ */ from_html("<span> </span>"), root_9$14 = /* @__PURE__ */ from_html("<span class=\"table-header-filter-icon svelte-171ci2i\"></span>"), root_10$13 = /* @__PURE__ */ from_html("<span><!></span>"), root_11$11 = /* @__PURE__ */ from_html("<span class=\"table-header-filter svelte-171ci2i\"><!></span>"), root_12$10 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-asc\"></span>"), root_13$8 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-desc\"></span>"), root_14$7 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-idle\"></span>"), root_15$5 = /* @__PURE__ */ from_html("<div class=\"sort-button svelte-171ci2i\"><!></div>"), root_16$4 = /* @__PURE__ */ from_html("<!> <span class=\"table-inline-search-clear svelte-171ci2i\"><!></span>", 1), root_17$3 = /* @__PURE__ */ from_html("<span class=\"table-inline-search-trigger svelte-171ci2i\"><!></span>"), root_18$3 = /* @__PURE__ */ from_html("<span class=\"table-header-inline-search svelte-171ci2i\"><!></span>"), root_19$3 = /* @__PURE__ */ from_html("<th><span class=\"table-header-content svelte-171ci2i\"><!> <!> <!> <!></span></th>"), root_20$3 = /* @__PURE__ */ from_html("<tr class=\"svelte-171ci2i\"><td class=\"table-empty svelte-171ci2i\"><!></td></tr>"), root_21$2 = /* @__PURE__ */ from_html("<span class=\"table-mobile-label svelte-171ci2i\" aria-hidden=\"true\">Select</span>"), root_22$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-checkbox-col svelte-171ci2i\"><!><!></td>"), root_23$2 = /* @__PURE__ */ from_html("<span class=\"table-mobile-label svelte-171ci2i\" aria-hidden=\"true\"> </span>"), root_24$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-row-number-col svelte-171ci2i\"><!><span class=\"table-mobile-value svelte-171ci2i\"> </span></td>"), root_25$1 = /* @__PURE__ */ from_html("<div><!></div>"), root_26$1 = /* @__PURE__ */ from_html("<td><!><!></td>"), root_27 = /* @__PURE__ */ from_html("<tr><!><!><!></tr>"), root_28 = /* @__PURE__ */ from_html("<div class=\"table-footer svelte-171ci2i\"><!></div>"), root_29 = /* @__PURE__ */ from_html("<span class=\"table-paginator-size svelte-171ci2i\"><!></span>"), root_30 = /* @__PURE__ */ from_html("<span class=\"table-paginator-controls svelte-171ci2i\"><!> <!></span>"), root_31 = /* @__PURE__ */ from_html("<div class=\"table-footer table-paginator svelte-171ci2i\"><span class=\"table-paginator-range svelte-171ci2i\"> </span> <!></div>"), root_32 = /* @__PURE__ */ from_html("<div><div><div class=\"table-scroll svelte-171ci2i\"><table class=\"svelte-171ci2i\"><!><thead class=\"svelte-171ci2i\"><tr class=\"svelte-171ci2i\"><!><!><!></tr></thead><tbody class=\"svelte-171ci2i\"><!></tbody></table></div></div> <!></div>"), root_33 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), $$css$86 = {
+var sort_default_default = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.64645 1.64645C5.84171 1.45118 6.15829 1.45118 6.35355 1.64645L8.85355 4.14645C9.04882 4.34171 9.04882 4.65829 8.85355 4.85355C8.65829 5.04882 8.34171 5.04882 8.14645 4.85355L6 2.70711L3.85355 4.85355C3.65829 5.04882 3.34171 5.04882 3.14645 4.85355C2.95118 4.65829 2.95118 4.34171 3.14645 4.14645L5.64645 1.64645Z\" fill=\"currentColor\"/>\n  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.14645 7.14645C3.34171 6.95118 3.65829 6.95118 3.85355 7.14645L6 9.29289L8.14645 7.14645C8.34171 6.95118 8.65829 6.95118 8.85355 7.14645C9.04882 7.34171 9.04882 7.65829 8.85355 7.85355L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536L3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645Z\" fill=\"currentColor\"/>\n</svg>\n", root$44 = /* @__PURE__ */ from_html("<div class=\"table-title svelte-171ci2i\"> </div>"), root_1$41 = /* @__PURE__ */ from_html("<button class=\"table-search-clear svelte-171ci2i\" type=\"button\"></button>"), root_2$31 = /* @__PURE__ */ from_html("<div class=\"table-search svelte-171ci2i\"><span class=\"table-search-icon svelte-171ci2i\"></span> <input class=\"table-search-input svelte-171ci2i\" type=\"search\" autocomplete=\"off\"/> <!></div>"), root_3$28 = /* @__PURE__ */ from_html("<div class=\"table-toolbar svelte-171ci2i\"><!></div>"), root_4$24 = /* @__PURE__ */ from_html("<caption class=\"sr-only svelte-171ci2i\"> </caption>"), root_5$23 = /* @__PURE__ */ from_html("<th><!></th>"), root_6$21 = /* @__PURE__ */ from_html("<th></th>"), root_7$19 = /* @__PURE__ */ from_html("<th> </th>"), root_8$17 = /* @__PURE__ */ from_html("<span> </span>"), root_9$14 = /* @__PURE__ */ from_html("<span class=\"table-header-filter-icon svelte-171ci2i\"></span>"), root_10$13 = /* @__PURE__ */ from_html("<span><!></span>"), root_11$11 = /* @__PURE__ */ from_html("<span class=\"table-header-filter svelte-171ci2i\"><!></span>"), root_12$10 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-asc\"></span>"), root_13$8 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-desc\"></span>"), root_14$7 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-idle\"></span>"), root_15$5 = /* @__PURE__ */ from_html("<div class=\"sort-button svelte-171ci2i\"><!></div>"), root_16$4 = /* @__PURE__ */ from_html("<!> <span class=\"table-inline-search-clear svelte-171ci2i\"><!></span>", 1), root_17$4 = /* @__PURE__ */ from_html("<span class=\"table-inline-search-trigger svelte-171ci2i\"><!></span>"), root_18$3 = /* @__PURE__ */ from_html("<span class=\"table-header-inline-search svelte-171ci2i\"><!></span>"), root_19$3 = /* @__PURE__ */ from_html("<th><span class=\"table-header-content svelte-171ci2i\"><!> <!> <!> <!></span></th>"), root_20$3 = /* @__PURE__ */ from_html("<tr class=\"svelte-171ci2i\"><td class=\"table-empty svelte-171ci2i\"><!></td></tr>"), root_21$2 = /* @__PURE__ */ from_html("<span class=\"table-mobile-label svelte-171ci2i\" aria-hidden=\"true\">Select</span>"), root_22$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-checkbox-col svelte-171ci2i\"><!><!></td>"), root_23$2 = /* @__PURE__ */ from_html("<span class=\"table-mobile-label svelte-171ci2i\" aria-hidden=\"true\"> </span>"), root_24$2 = /* @__PURE__ */ from_html("<td class=\"table-content table-row-number-col svelte-171ci2i\"><!><span class=\"table-mobile-value svelte-171ci2i\"> </span></td>"), root_25$1 = /* @__PURE__ */ from_html("<div><!></div>"), root_26$1 = /* @__PURE__ */ from_html("<td><!><!></td>"), root_27 = /* @__PURE__ */ from_html("<tr><!><!><!></tr>"), root_28 = /* @__PURE__ */ from_html("<div class=\"table-footer svelte-171ci2i\"><!></div>"), root_29 = /* @__PURE__ */ from_html("<span class=\"table-paginator-size svelte-171ci2i\"><!></span>"), root_30 = /* @__PURE__ */ from_html("<span class=\"table-paginator-controls svelte-171ci2i\"><!> <!></span>"), root_31 = /* @__PURE__ */ from_html("<div class=\"table-footer table-paginator svelte-171ci2i\"><span class=\"table-paginator-range svelte-171ci2i\"> </span> <!></div>"), root_32 = /* @__PURE__ */ from_html("<div><div><div class=\"table-scroll svelte-171ci2i\"><table class=\"svelte-171ci2i\"><!><thead class=\"svelte-171ci2i\"><tr class=\"svelte-171ci2i\"><!><!><!></tr></thead><tbody class=\"svelte-171ci2i\"><!></tbody></table></div></div> <!></div>"), root_33 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), $$css$86 = {
 	hash: "svelte-171ci2i",
 	code: "\n  /* ── Title ─────────────────────────────────────────────────────────────── */.table-title.svelte-171ci2i {margin:var(--table-title-margin, 0px 0px 12px 0px);font-size:var(--table-title-font-size, var(--table-tile-font-size, 18px));font-weight:var(--table-title-font-weight, 600);\n    /* Unlike .table-content, a heading legitimately has no background of its\n       own -- it sits directly on whatever surface the consumer places it on.\n       The old #111827 literal ignored that surface entirely: on a dark page\n       it measured a contrast of 1.03 against #1a1a26, i.e. invisible. `color`\n       already inherits by default, so `inherit` states that explicitly and\n       lets the title track its container's text colour; `currentColor` would\n       resolve to the same value here (the spec special-cases it to mean\n       exactly `inherit` for the `color` property) but reads as if it were\n       referencing a colour set elsewhere on this rule, which it isn't. */color:var(--table-title-color, inherit);font-family:var(--table-title-font-family, inherit);padding:var(--table-title-padding);}\n\n  /* ── C2-3 Search bar ────────────────────────────────────────────────────── */.table-search.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-search-gap, 8px);padding:var(--table-search-padding, 8px 12px);border:var(--table-search-border, 1px solid #e5e7eb);border-radius:var(--table-search-border-radius, var(--radius, 4px));background-color:var(--table-search-background, #ffffff);margin-bottom:var(--table-search-margin-bottom, 8px);}.table-search-icon.svelte-171ci2i {display:inline-flex;align-items:center;color:var(--table-search-icon-color, #9ca3af);flex-shrink:0;}.table-search-icon.svelte-171ci2i svg {width:var(--table-search-icon-size, 16px);height:var(--table-search-icon-size, 16px);}.table-search-input.svelte-171ci2i {flex:1;border:none;outline:none;background:transparent;font-size:var(--table-search-font-size, 14px);color:var(--table-search-color, #111827);min-width:0;}.table-search-input.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:2px;border-radius:var(--table-search-focus-border-radius, var(--radius, 4px));}.table-search-input.svelte-171ci2i::placeholder {color:var(--table-search-placeholder-color, #4b5563);}\n\n  /* Hide browser-default clear button on search inputs */.table-search-input.svelte-171ci2i::-webkit-search-cancel-button {display:none;}.table-search-clear.svelte-171ci2i {display:inline-flex;align-items:center;padding:2px;border:none;background:transparent;color:var(--table-search-clear-color, #6b7280);cursor:pointer;border-radius:4px;flex-shrink:0;}.table-search-clear.svelte-171ci2i:hover {color:var(--table-search-clear-hover-color, #111827);background-color:var(--table-search-clear-hover-background, rgba(0, 0, 0, 0.05));}.table-search-clear.svelte-171ci2i svg {width:var(--table-search-clear-icon-size, 14px);height:var(--table-search-clear-icon-size, 14px);}.table-header-inline-search.svelte-171ci2i {display:inline-flex;align-items:center;gap:var(--table-inline-search-gap, 6px);margin-left:auto;}.table-inline-search-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-trigger-padding, 4px);--button-text-color: var(--table-inline-search-icon-color, #9ca3af);}.table-inline-search-trigger.svelte-171ci2i svg {width:var(--table-inline-search-icon-size, 16px);height:var(--table-inline-search-icon-size, 16px);display:block;}.table-inline-search-input.svelte-171ci2i {--input-margin: 0;width:var(--table-inline-search-input-width, 160px);}.table-inline-search-clear.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: var(--table-inline-search-clear-padding, 2px);--button-text-color: var(--table-inline-search-clear-color, #6b7280);}.table-inline-search-clear.svelte-171ci2i svg {width:var(--table-inline-search-clear-icon-size, 14px);height:var(--table-inline-search-clear-icon-size, 14px);}\n\n  /* ── Container ──────────────────────────────────────────────────────────── */\n  /* `hidden` is the default because it is what clips the table's corners to\n     this element's border-radius; without it the first and last cells square\n     off over the rounded border. A consumer who needs the container itself to\n     scroll sideways sets this to `auto` and accepts that trade. Note the\n     scrollable variant below sets `overflow-y`, and per the CSS overflow spec\n     a `visible` on one axis computes to `auto` when the other is not visible,\n     so `visible` here does not survive on a scrollable table. */.table-container.svelte-171ci2i {border:var(--table-border, 1px solid #e5e7eb);border-radius:var(--table-border-radius, var(--radius, 4px));width:var(--table-container-width, 100%);overflow:var(--table-container-overflow, hidden);}.scrollable-table.svelte-171ci2i {height:var(--table-container-height, 143px);overflow-y:auto;}.table-scroll-shell.svelte-171ci2i {position:relative;min-width:0;}\n\n  /* Edge scrims: fade the clipped side of the table into its background so\n     hidden columns read as \"more content this way\". Class-driven from live\n     scroll state — never shown when the table fits. pointer-events: none\n     keeps cells under the fade clickable; z-index 2 paints above sticky\n     headers (z-index 1). */.table-scroll-shell.svelte-171ci2i::before,\n  .table-scroll-shell.svelte-171ci2i::after {content:'';position:absolute;top:0;bottom:0;width:var(--table-scroll-scrim-width, 32px);opacity:0;pointer-events:none;transition:opacity var(--table-scroll-scrim-transition-duration, var(--motion-duration, 0.2s))\n      var(--table-scroll-scrim-transition-easing, var(--motion-easing, ease));z-index:2;}.table-scroll-shell.svelte-171ci2i::before {left:0;border-radius:var(--table-border-radius, var(--radius, 4px)) 0 0\n      var(--table-border-radius, var(--radius, 4px));background:linear-gradient(to right, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.svelte-171ci2i::after {right:0;border-radius:0 var(--table-border-radius, var(--radius, 4px))\n      var(--table-border-radius, var(--radius, 4px)) 0;background:linear-gradient(to left, var(--table-scroll-scrim-color, #ffffff), transparent);}.table-scroll-shell.scrollable-left.svelte-171ci2i::before {opacity:1;}.table-scroll-shell.scrollable-right.svelte-171ci2i::after {opacity:1;}.table-scroll.svelte-171ci2i {overflow-x:auto;min-width:0;scrollbar-width:thin;}table.svelte-171ci2i {width:var(--table-width, 100%);border-collapse:var(--table-border-collapse, collapse);}.table-header.svelte-171ci2i,\n  .table-content.svelte-171ci2i {border:var(--table-inner-border, none);padding:var(--table-padding, 12px 16px);text-align:var(--table-text-align, left);width:var(--table-column-width);\n    /* Wrap at word boundaries; only a single word wider than the column may\n       split as a last resort. break-word (not anywhere) keeps each column's\n       min-content width at its longest word, so ordinary labels never split\n       mid-word — the old break-all default did. Opt back in per consumer via\n       --table-word-break / --table-overflow-wrap. */word-break:var(--table-word-break, normal);overflow-wrap:var(--table-overflow-wrap, break-word);}.scrollable-content.svelte-171ci2i {overflow-y:auto;height:var(--scrollable-column-height, 20px);}.table-header.svelte-171ci2i {background-color:var(--table-header-background, var(--table-header-border-bgcolor, #f9fafb));font-size:var(--table-header-font-size, 13px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 600);letter-spacing:var(--table-header-letter-spacing, 0.02em);text-transform:var(--table-header-text-transform, inherit);color:var(--table-header-color, var(--table-header-font-color, #6b7280));border-bottom:var(--table-header-border, var(--table-inner-border, none));}.table-header-content.svelte-171ci2i {display:flex;align-items:center;gap:4px;justify-content:var(--table-header-justify, flex-start);}.table-header-label.svelte-171ci2i {text-decoration:var(--table-header-tooltip-underline, underline dotted);text-underline-offset:2px;cursor:help;}.table-header-label-plain.svelte-171ci2i {text-decoration:none;}.table-header-filter.svelte-171ci2i {display:inline-flex;align-items:center;}.table-header-filter-trigger.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-width: fit-content;--button-height: fit-content;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));display:inline-flex;align-items:center;opacity:var(--table-sort-idle-opacity, 0.5);}.table-header-filter-trigger.svelte-171ci2i:hover {opacity:var(--table-sort-idle-hover-opacity, 0.85);}.table-header-filter-active.svelte-171ci2i {opacity:1;color:var(--table-filter-active-color, #2563eb);}.table-header-filter-icon.svelte-171ci2i svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}.table-cell-clamp.svelte-171ci2i {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.table-header-sticky.svelte-171ci2i {position:sticky;top:var(--table-header-sticky-top, 0);z-index:1;}.table-content.svelte-171ci2i {\n    /* The terminal #ffffff matters as much as the colour beside it. Without it\n       the whole declaration is invalid at computed-value time when neither\n       variable is set, so the cell falls back to `transparent` and inherits\n       whatever surface it lands on -- while `color` still resolves to a\n       hardcoded near-black. On a dark page that is #111827 on #1a1a26: a\n       measured contrast of 1.03, i.e. invisible. The header row never had the\n       bug because it pairs its colour with a background of its own. */background-color:var(--table-content-background, var(--table-content-border-bgcolor, #ffffff));font-size:var(--table-content-font-size, 14px);font-family:var(--table-content-font-family, inherit);color:var(--table-content-color, var(--table-content-font-color, #111827));}\n\n  /* Column highlight (TableColumn.highlighted). Row hover keeps higher\n     specificity and row selection is declared later at equal specificity, so\n     both row states paint over the column wash. */.table-header.table-col-highlighted.svelte-171ci2i {background-color:var(\n      --table-col-highlight-header-background,\n      var(--table-col-highlight-background, #f3f9ff)\n    );}.table-content.table-col-highlighted.svelte-171ci2i {background-color:var(--table-col-highlight-background, #f3f9ff);}.table-row.svelte-171ci2i {border-bottom:var(--table-row-border, 1px solid #f3f4f6);background-color:var(--table-row-background);}.table-row.svelte-171ci2i:last-child {border-bottom:var(--table-row-last-border, none);}.table-row.svelte-171ci2i:nth-child(even) {background-color:var(--table-row-alt-background, var(--table-row-background));}.table-row.svelte-171ci2i:hover {background-color:var(--table-row-hover-background);}.table-row.svelte-171ci2i:hover > .table-content:where(.svelte-171ci2i) {background-color:var(\n      --table-row-hover-background,\n      var(--table-content-background, var(--table-content-border-bgcolor))\n    );}.table-row-clickable.svelte-171ci2i {cursor:pointer;}.table-row-clickable.svelte-171ci2i:focus-visible {outline:2px solid var(--table-focus-outline-color, #3b82f6);outline-offset:-2px;}\n\n  /* C2-1: Selected row highlight */.table-row-selected.svelte-171ci2i {background-color:var(--table-row-selected-background, #eff6ff);}.table-row-selected.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-row-selected-background, #eff6ff);}\n\n  /* Summary/period-total row (summaryRowIndex): both the row and its cells,\n     since a themed --table-content-background would otherwise paint over a\n     row-level background. Falls back to the regular cell background. */.table-summary-row.svelte-171ci2i {background-color:var(--table-summary-row-background, var(--table-content-background));}.table-summary-row.svelte-171ci2i > .table-content:where(.svelte-171ci2i) {background-color:var(--table-summary-row-background, var(--table-content-background));}\n\n  /* ── C2-1 Checkbox column ───────────────────────────────────────────────── */\n  /* The column renders the library Checkbox. The table's own --table-checkbox-*\n     tokens stay the public API and are bridged onto Checkbox's --checkbox-*\n     variables here, so a consumer theming the table keeps working and a\n     consumer theming Checkbox app-wide is overridden only inside the table. */.table-checkbox-col.svelte-171ci2i {width:var(--table-checkbox-col-width, 44px);padding:var(--table-checkbox-col-padding, 12px 12px);--checkbox-container-gap: 0;--checkbox-size: var(--table-checkbox-size, 18px);--checkbox-border: var(--table-checkbox-border, 2px solid #9ca3af);--checkbox-border-radius: var(--table-checkbox-border-radius, var(--radius, 4px));--checkbox-background: var(--table-checkbox-background, transparent);--checkbox-hover-border-color: var(--table-checkbox-hover-border-color, #6b7280);--checkbox-checked-background: var(--table-checkbox-checked-background, #2563eb);--checkbox-checked-border: var(\n      --table-checkbox-checked-border,\n      2px solid var(--table-checkbox-checked-border-color, #2563eb)\n    );--checkbox-indeterminate-background: var(--table-checkbox-indeterminate-background, #2563eb);--checkbox-indeterminate-border: var(\n      --table-checkbox-indeterminate-border,\n      2px solid var(--table-checkbox-indeterminate-border-color, #2563eb)\n    );--checkbox-disabled-opacity: var(--table-checkbox-disabled-opacity, 0.4);--checkbox-focus-ring: var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));--checkbox-icon-size: var(--table-checkbox-icon-size, 12px);--checkbox-checkmark-color: var(--table-checkbox-icon-color, #ffffff);--checkbox-dash-color: var(--table-checkbox-icon-color, #ffffff);\n    /* Named so a consumer can reach it. Table sets the Checkbox child's token\n       directly, and a rule on the element beats anything declared at :root, so\n       through <sui-table> the selection checkboxes' transition could not be\n       slowed or stopped by any means -- custom properties are the only route\n       across a shadow boundary and this one was already spoken for. */--checkbox-transition: var(--table-checkbox-transition, 0.15s);}\n\n  /* ── Sort button ────────────────────────────────────────────────────────── */.sort-button.svelte-171ci2i {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-margin: 0;--button-text-color: var(--table-sort-button-color, inherit);--button-border-radius: 4px;--button-width: fit-content;--button-height: fit-content;--button-hover-color: var(--table-sort-button-hover-background, rgba(0, 0, 0, 0.05));--button-hover-text-color: var(\n      --table-sort-button-hover-color,\n      var(--table-sort-button-color, inherit)\n    );display:inline-flex;align-items:center;line-height:1;}.sort-button.svelte-171ci2i .sort-icon {display:inline-flex;align-items:center;}\n\n  /* The sorted-direction half paints via currentColor; without an explicit\n     color it inherits the Button's text color (white on the default button\n     theme), which disappears on light headers. Default to the design\n     system's active blue. */.sort-button.svelte-171ci2i .sort-icon:not(.sort-icon-idle) {color:var(--table-sort-active-color, #1b85ff);}.sort-button.svelte-171ci2i .sort-icon svg {width:var(--table-sort-icon-size, 14px);height:var(--table-sort-icon-size, 14px);display:block;}\n\n  /* Two-tone state painting. The shared sort-default.svg asset stays\n     color-agnostic (fill=\"currentColor\", like every other icon asset); the\n     state colors live here. All halves default to the inactive fill, then\n     the sorted direction's half is released back to currentColor (the\n     active color above). Path order in the asset is up-chevron first,\n     down-chevron second. */.sort-button.svelte-171ci2i .sort-icon svg path {fill:var(--table-sort-inactive-color, #c7c7c7);}.sort-button.svelte-171ci2i .sort-icon-asc svg path:first-child,\n  .sort-button.svelte-171ci2i .sort-icon-desc svg path:last-child {fill:currentColor;}\n\n  /* The design system draws every sort state fully opaque — faintness comes\n     from the glyph fills (inactive halves #C7C7C7, active direction\n     currentColor), never from transparency. The opacity vars remain for\n     consumers that prefer a fade but now default to solid; hover steps the\n     inactive halves to the design system's hover gray. */.sort-button.svelte-171ci2i .sort-icon-idle {opacity:var(--table-sort-idle-opacity, 1);}.sort-button.svelte-171ci2i:hover .sort-icon-idle {opacity:var(--table-sort-idle-hover-opacity, 1);--table-sort-inactive-color: var(--table-sort-hover-color, #797979);}\n\n  /* ── Empty ──────────────────────────────────────────────────────────────── */.table-empty.svelte-171ci2i {padding:var(--table-empty-padding, 32px 24px);text-align:center;color:var(--table-empty-color, #9ca3af);}\n\n  /* ── Footer ─────────────────────────────────────────────────────────────── */.table-footer.svelte-171ci2i {border-top:var(--table-footer-border, 1px solid #e5e7eb);padding:var(--table-footer-padding, 8px 16px);background-color:var(--table-footer-background, transparent);}.table-paginator.svelte-171ci2i {display:flex;align-items:center;justify-content:space-between;gap:var(--table-paginator-gap, 12px);flex-wrap:wrap;}.table-paginator-range.svelte-171ci2i {font-size:var(--table-paginator-range-font-size, 13px);color:var(--table-paginator-range-color, #6b7280);font-variant-numeric:tabular-nums;}.table-paginator-controls.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-paginator-gap, 12px);}.table-paginator-size.svelte-171ci2i {display:inline-flex;min-width:var(--table-paginator-size-width, 72px);\n    /* Select's standalone defaults (40px min-height, 8px 12px padding) render\n       58px tall next to the 36px pagination buttons sharing this row. Match the\n       steppers instead of towering over them. */--select-trigger-min-height: var(--table-paginator-size-height, 36px);--select-trigger-padding: var(--table-paginator-size-padding, 0 8px);}\n\n  /* ── Toolbar (bulk actions) ─────────────────────────────────────────────── */.table-toolbar.svelte-171ci2i {display:flex;align-items:center;gap:var(--table-toolbar-gap, 12px);padding:var(--table-toolbar-padding, 8px 12px);border:var(--table-toolbar-border, 1px solid #e5e7eb);border-radius:var(--table-toolbar-border-radius, var(--radius, 4px));background-color:var(--table-toolbar-background, #f9fafb);margin-bottom:var(--table-toolbar-margin-bottom, 8px);}\n\n  /* ── Row-number column ──────────────────────────────────────────────────── */.table-row-number-col.svelte-171ci2i {width:var(--table-row-number-col-width, 48px);color:var(--table-row-number-color, #6b7280);font-variant-numeric:tabular-nums;text-align:var(--table-row-number-align, var(--table-text-align, left));}\n\n  /* ── Accessibility ──────────────────────────────────────────────────────── */.sr-only.svelte-171ci2i {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}\n\n  /* ── Mobile record cards (opt-in via `mobileCardLayout`) ──────────────────\n     The label span is always in the DOM -- rendering it only under the media\n     query below would mean an AT that queries computed style rather than\n     layout (or a print stylesheet, or a future breakpoint change) sees no\n     label at all until the exact 640px condition is re-evaluated. Keeping the\n     element and toggling `display` is what lets `aria-hidden` on it (see the\n     template) stay meaningful at every width: hidden today, but never a\n     generated-content trick that could not carry that attribute in the first\n     place. */.table-mobile-label.svelte-171ci2i {display:none;}\n\n  /* The breakpoint is a literal, not `var(--table-mobile-breakpoint)`: a\n     custom property can't be read inside an `@media` condition (only inside\n     a declaration value), so a themable breakpoint was never on the table --\n     documented in docs/Table.md rather than silently unsupported. */\n  @media (max-width: 640px) {\n    /* `display: table` (and its `-row`/`-cell`/etc. companions) is what gives\n       a table its IMPLICIT header/cell ARIA semantics -- switching every one\n       of these to `block` for the stacked-card look throws that away, which\n       is exactly why `mobileRole()` in the script restates it explicitly as\n       `table`/`rowgroup`/`row`/`columnheader`/`cell` on the elements below.\n       Without both halves this rule would silently turn every consumer's\n       table into an AX-tree list the moment their viewport narrowed. */.table-mobile-cards.svelte-171ci2i table:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i thead:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i tr:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i th:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i td:where(.svelte-171ci2i) {display:block;width:100%;}\n\n    /* Headers are not shown as a row anymore -- their text now repeats per\n       card as the `.table-mobile-label` beside each value -- but they stay\n       in the DOM (not `display: none`) so `role=\"columnheader\"` continues\n       naming its `role=\"cell\"` for any reading that still associates the\n       two by DOM structure rather than only by the label span's text. */.table-mobile-cards.svelte-171ci2i thead:where(.svelte-171ci2i) {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}\n\n    /* The horizontal-scroll affordance this table uses at desktop width (see\n       .table-scroll / .table-scroll-shell above) has nothing to scroll once\n       every cell is a full-width block, and a lingering scrim would fade a\n       card edge that no longer clips anything. */.table-mobile-cards.svelte-171ci2i .table-scroll:where(.svelte-171ci2i) {overflow-x:visible;}.table-mobile-cards.svelte-171ci2i .table-scroll-shell:where(.svelte-171ci2i)::before,\n    .table-mobile-cards.svelte-171ci2i .table-scroll-shell:where(.svelte-171ci2i)::after {display:none;}.table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i) tr.table-row:where(.svelte-171ci2i) {border:var(--table-mobile-card-border, 1px solid #e5e7eb);border-radius:var(\n        --table-mobile-card-radius,\n        var(--table-border-radius, var(--radius, 4px))\n      );padding:var(--table-mobile-card-padding, 12px);margin-block-end:var(--table-mobile-card-gap, 12px);}.table-mobile-cards.svelte-171ci2i tbody:where(.svelte-171ci2i) tr.table-row:where(.svelte-171ci2i):last-child {margin-block-end:0;}\n\n    /* Each cell becomes a label/value pair instead of a table column; the\n       label span (hidden above) is the only thing `display: inline` turns\n       back on inside this query. */.table-mobile-cards.svelte-171ci2i td.table-content:where(.svelte-171ci2i) {display:flex;align-items:baseline;gap:var(--table-mobile-label-gap, 8px);border:none;}.table-mobile-cards.svelte-171ci2i .table-mobile-label:where(.svelte-171ci2i) {display:inline;flex:0 0 var(--table-mobile-label-width, 40%);font-weight:var(--table-mobile-label-font-weight, 600);color:var(--table-mobile-label-color, #6b7280);}.table-mobile-cards.svelte-171ci2i .table-mobile-value:where(.svelte-171ci2i),\n    .table-mobile-cards.svelte-171ci2i td.table-content:where(.svelte-171ci2i) > div:where(.svelte-171ci2i) {flex:1 1 auto;min-width:0;}\n  }"
 };
@@ -22825,7 +23271,7 @@ function Table(e, t) {
 					}
 					reset(i), append(e, t);
 				}, a = (e) => {
-					var t = root_17$3(), n = child(t);
+					var t = root_17$4(), n = child(t);
 					{
 						let e = (e) => {
 							var t = comment();
@@ -24086,9 +24532,9 @@ var TIME_DISPLAY_PATTERN = /^(1[0-2]|0?[1-9]):([0-5][0-9])\s?(AM|PM)$/i, pad = (
 	if_block(o, (e) => {
 		n() && e(s);
 	}), append(e, a);
-}, root$38 = /* @__PURE__ */ from_html("<span class=\"drp-field-error svelte-gpybdi\" role=\"alert\"> </span>"), root_1$36 = /* @__PURE__ */ from_html("<span class=\"drp-trigger-label svelte-gpybdi\"> </span> <span class=\"drp-trigger-icon svelte-gpybdi\" aria-hidden=\"true\"><!></span>", 1), root_2$27 = /* @__PURE__ */ from_html("<div class=\"drp-compare-panel-body svelte-gpybdi\"><!></div>"), root_3$25 = /* @__PURE__ */ from_html("<div class=\"drp-compare-panel svelte-gpybdi\" role=\"dialog\" aria-label=\"Compare period picker\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"drp-footer svelte-gpybdi\"><!> <!></div></div>"), root_4$22 = /* @__PURE__ */ from_html("<div class=\"drp-compare-trigger-wrapper svelte-gpybdi\"><!> <!></div>"), root_5$21 = /* @__PURE__ */ from_html("<span class=\"drp-preset-group-label svelte-gpybdi\"> </span>"), root_6$20 = /* @__PURE__ */ from_html("<div class=\"drp-preset-divider svelte-gpybdi\" role=\"separator\" aria-hidden=\"true\"><!></div>"), root_7$18 = /* @__PURE__ */ from_html("<span class=\"drp-preset-check svelte-gpybdi\" aria-hidden=\"true\"></span>"), root_8$16 = /* @__PURE__ */ from_html("<!> <button type=\"button\" role=\"option\"> <!></button>", 1), root_9$13 = /* @__PURE__ */ from_html("<div class=\"drp-sidebar svelte-gpybdi\" role=\"listbox\" aria-label=\"Date presets\"></div>"), root_10$12 = /* @__PURE__ */ from_html("<div class=\"drp-date-time-group svelte-gpybdi\"><div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"Start date\" aria-label=\"Start date\"/></div> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"12:00 AM\" aria-label=\"Start time\"/></div> <!></div> <!> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div class=\"drp-date-time-group svelte-gpybdi\"><div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"End date\" aria-label=\"End date\"/></div> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"11:59 PM\" aria-label=\"End time\"/></div> <!></div> <!>", 1), root_11$10 = /* @__PURE__ */ from_html("<button type=\"button\" aria-label=\"Toggle time selection\"><span class=\"drp-time-toggle-icon svelte-gpybdi\" aria-hidden=\"true\"></span></button>"), root_12$9 = /* @__PURE__ */ from_html("<div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"Start date\" aria-label=\"Start date\"/> <!></div> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"End date\" aria-label=\"End date\"/> <!></div> <!>", 1), root_13$7 = /* @__PURE__ */ from_html("<div class=\"drp-time-input-row svelte-gpybdi\"><div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"12:00 AM\" aria-label=\"Start time\"/> <!></div> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"11:59 PM\" aria-label=\"End time\"/> <!></div></div>"), root_14$6 = /* @__PURE__ */ from_html("<div><div class=\"drp-date-input-row svelte-gpybdi\"><!></div> <!></div>"), root_15$4 = /* @__PURE__ */ from_html("<!> <!>", 1), root_16$3 = /* @__PURE__ */ from_html("<div class=\"drp-dual-header svelte-gpybdi\"><button type=\"button\" class=\"drp-nav-btn svelte-gpybdi\" aria-label=\"Previous months\"><span class=\"drp-nav-chevron drp-nav-chevron-left svelte-gpybdi\" aria-hidden=\"true\"></span></button> <div class=\"drp-dual-month-labels svelte-gpybdi\"><span class=\"drp-month-label svelte-gpybdi\"> </span> <span class=\"drp-month-label svelte-gpybdi\"> </span></div> <button type=\"button\" class=\"drp-nav-btn svelte-gpybdi\" aria-label=\"Next months\"><span class=\"drp-nav-chevron drp-nav-chevron-right svelte-gpybdi\" aria-hidden=\"true\"></span></button></div> <div class=\"drp-months-row svelte-gpybdi\"><!></div>", 1), root_17$2 = /* @__PURE__ */ from_html("<div class=\"drp-time-row svelte-gpybdi\"><!></div>"), root_18$2 = /* @__PURE__ */ from_html("<div class=\"drp-compare-section svelte-gpybdi\"><!></div>"), root_19$2 = /* @__PURE__ */ from_html("<div role=\"dialog\" aria-label=\"Date range picker\" aria-modal=\"true\" tabindex=\"-1\"><div class=\"drp-panel-inner svelte-gpybdi\"><!> <div class=\"drp-calendars svelte-gpybdi\"><!> <!> <!> <!></div></div> <div class=\"drp-footer svelte-gpybdi\"><!> <!> <!></div></div>"), root_20$2 = /* @__PURE__ */ from_html("<div><div class=\"drp-trigger-wrapper svelte-gpybdi\"><!></div> <!> <!></div>"), $$css$79 = {
+}, root$38 = /* @__PURE__ */ from_html("<span class=\"drp-field-error svelte-gpybdi\" role=\"alert\"> </span>"), root_1$36 = /* @__PURE__ */ from_html("<span class=\"drp-trigger-label svelte-gpybdi\"> </span> <span class=\"drp-trigger-icon svelte-gpybdi\" aria-hidden=\"true\"><!></span>", 1), root_2$27 = /* @__PURE__ */ from_html("<div class=\"drp-compare-panel-body svelte-gpybdi\"><!></div>"), root_3$25 = /* @__PURE__ */ from_html("<div class=\"drp-compare-panel svelte-gpybdi\" role=\"dialog\" aria-label=\"Compare period picker\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"drp-footer svelte-gpybdi\"><!> <!></div></div>"), root_4$22 = /* @__PURE__ */ from_html("<div class=\"drp-compare-trigger-wrapper svelte-gpybdi\"><!> <!></div>"), root_5$21 = /* @__PURE__ */ from_html("<span class=\"drp-preset-group-label svelte-gpybdi\"> </span>"), root_6$20 = /* @__PURE__ */ from_html("<div class=\"drp-preset-divider svelte-gpybdi\" role=\"separator\" aria-hidden=\"true\"><!></div>"), root_7$18 = /* @__PURE__ */ from_html("<span class=\"drp-preset-check svelte-gpybdi\" aria-hidden=\"true\"></span>"), root_8$16 = /* @__PURE__ */ from_html("<!> <button type=\"button\" role=\"option\"> <!></button>", 1), root_9$13 = /* @__PURE__ */ from_html("<div class=\"drp-sidebar svelte-gpybdi\" role=\"listbox\" aria-label=\"Date presets\"></div>"), root_10$12 = /* @__PURE__ */ from_html("<div class=\"drp-date-time-group svelte-gpybdi\"><div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"Start date\" aria-label=\"Start date\"/></div> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"12:00 AM\" aria-label=\"Start time\"/></div> <!></div> <!> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div class=\"drp-date-time-group svelte-gpybdi\"><div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"End date\" aria-label=\"End date\"/></div> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"11:59 PM\" aria-label=\"End time\"/></div> <!></div> <!>", 1), root_11$10 = /* @__PURE__ */ from_html("<button type=\"button\" aria-label=\"Toggle time selection\"><span class=\"drp-time-toggle-icon svelte-gpybdi\" aria-hidden=\"true\"></span></button>"), root_12$9 = /* @__PURE__ */ from_html("<div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"Start date\" aria-label=\"Start date\"/> <!></div> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div><input type=\"text\" class=\"drp-date-input-value svelte-gpybdi\" maxlength=\"32\" placeholder=\"End date\" aria-label=\"End date\"/> <!></div> <!>", 1), root_13$7 = /* @__PURE__ */ from_html("<div class=\"drp-time-input-row svelte-gpybdi\"><div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"12:00 AM\" aria-label=\"Start time\"/> <!></div> <span class=\"drp-datetime-arrow svelte-gpybdi\" aria-hidden=\"true\"></span> <div><span class=\"drp-time-input-icon svelte-gpybdi\" aria-hidden=\"true\"></span> <input type=\"text\" class=\"drp-time-field svelte-gpybdi\" maxlength=\"8\" placeholder=\"11:59 PM\" aria-label=\"End time\"/> <!></div></div>"), root_14$6 = /* @__PURE__ */ from_html("<div><div class=\"drp-date-input-row svelte-gpybdi\"><!></div> <!></div>"), root_15$4 = /* @__PURE__ */ from_html("<!> <!>", 1), root_16$3 = /* @__PURE__ */ from_html("<div class=\"drp-dual-header svelte-gpybdi\"><button type=\"button\" class=\"drp-nav-btn svelte-gpybdi\" aria-label=\"Previous months\"><span class=\"drp-nav-chevron drp-nav-chevron-left svelte-gpybdi\" aria-hidden=\"true\"></span></button> <div class=\"drp-dual-month-labels svelte-gpybdi\"><span class=\"drp-month-label svelte-gpybdi\"> </span> <span class=\"drp-month-label svelte-gpybdi\"> </span></div> <button type=\"button\" class=\"drp-nav-btn svelte-gpybdi\" aria-label=\"Next months\"><span class=\"drp-nav-chevron drp-nav-chevron-right svelte-gpybdi\" aria-hidden=\"true\"></span></button></div> <div class=\"drp-months-row svelte-gpybdi\"><!></div>", 1), root_17$3 = /* @__PURE__ */ from_html("<div class=\"drp-time-row svelte-gpybdi\"><!></div>"), root_18$2 = /* @__PURE__ */ from_html("<div class=\"drp-compare-section svelte-gpybdi\"><!></div>"), root_19$2 = /* @__PURE__ */ from_html("<div role=\"dialog\" aria-label=\"Date range picker\" aria-modal=\"true\" tabindex=\"-1\"><div class=\"drp-panel-inner svelte-gpybdi\"><!> <div class=\"drp-calendars svelte-gpybdi\"><!> <!> <!> <!></div></div> <div class=\"drp-footer svelte-gpybdi\"><!> <!> <!></div></div>"), root_20$2 = /* @__PURE__ */ from_html("<div><div class=\"drp-trigger-wrapper svelte-gpybdi\"><!></div> <!> <!></div>"), $$css$79 = {
 	hash: "svelte-gpybdi",
-	code: ".drp-field-error.svelte-gpybdi {display:block;color:var(--drp-field-error-color, #b3261e);font-size:var(--drp-field-error-font-size, 11px);line-height:var(--drp-field-error-line-height, 1.4);margin-top:var(--drp-field-error-margin-top, 2px);}.drp-root.svelte-gpybdi {position:relative;display:inline-block;}\n\n  /* ── Trigger wrapper ── */.drp-trigger-wrapper.svelte-gpybdi {display:inline-block;}\n\n  /* Bridge drp-trigger CSS vars to Button CSS vars on the wrapper */.drp-trigger-wrapper.svelte-gpybdi {--button-color: var(--drp-trigger-background, inherit);--button-border: var(--drp-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-trigger-color, inherit);--button-padding: var(--drp-trigger-padding, 8px 12px);--button-min-width: var(--drp-trigger-min-width, 200px);--button-gap: var(--drp-trigger-gap, 8px);--button-hover-border: var(\n      --drp-trigger-hover-border,\n      var(--drp-trigger-border, 1px solid currentColor)\n    );}.drp-trigger-wrapper .drp-trigger {display:inline-flex;align-items:center;gap:var(--drp-trigger-gap, 8px);white-space:nowrap;min-width:var(--drp-trigger-min-width, 200px);}.drp-trigger-wrapper .drp-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}.drp-trigger-label.svelte-gpybdi {flex:1;text-align:left;}.drp-trigger-icon.svelte-gpybdi {display:inline-flex;align-items:center;color:var(--drp-trigger-icon-color, inherit);flex-shrink:0;}\n\n  /* ── Panel ── */.drp-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-panel-min-width, 320px);max-width:var(--drp-panel-max-width, 760px);max-height:var(--drp-panel-max-height, calc(100dvh - 80px));overflow:hidden;}\n\n  /* Set only when the panel would not fit below the trigger — see positionPanel(). */.drp-panel-above.svelte-gpybdi {top:auto;bottom:calc(100% + var(--drp-panel-offset, 6px));}.drp-panel-align-left.svelte-gpybdi {left:0;right:auto;}.drp-panel-align-right.svelte-gpybdi {right:0;left:auto;}.drp-panel-inner.svelte-gpybdi {display:flex;flex-direction:row;flex:1;min-height:0;overflow-y:auto;}\n\n  /* ── Sidebar ── */.drp-sidebar.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-sidebar-padding, 12px 8px);border-right:var(--drp-sidebar-border, 1px solid #e8e8e8);min-width:var(--drp-sidebar-min-width, 140px);gap:2px;overflow-y:auto;max-height:var(--drp-sidebar-max-height, 400px);}.drp-preset-item.svelte-gpybdi {display:block;width:100%;text-align:left;padding:var(--drp-preset-padding, 7px 12px);background:none;border:none;border-radius:var(--drp-preset-border-radius, var(--radius, 4px));color:var(--drp-preset-color, inherit);cursor:pointer;white-space:nowrap;transition:background var(--drp-preset-item-transition-duration, var(--motion-duration, 0.12s))\n      var(--drp-preset-item-transition-easing, var(--motion-easing, ease));}.drp-preset-item.svelte-gpybdi:hover {background:var(--drp-preset-hover-background, #f5f5f5);}.drp-preset-active.svelte-gpybdi {background:var(--drp-preset-active-background, currentColor);color:var(--drp-preset-active-color, #ffffff);}.drp-preset-active.svelte-gpybdi:hover {background:var(--drp-preset-active-hover-background, #333333);}\n\n  /* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick\n     sits flush-right while the label stays left. A preset with no tick (or a\n     label-only preset) keeps its single flex child at the start, unchanged. */.drp-preset-checkable.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:var(--drp-preset-check-gap, 8px);}.drp-preset-check.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-preset-check-size, 16px);height:var(--drp-preset-check-size, 16px);color:var(--drp-preset-check-color, inherit);}.drp-preset-check.svelte-gpybdi svg {width:100%;height:100%;}\n\n  /* ── Calendar area ── */.drp-calendars.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-calendars-padding, 16px);gap:var(--drp-calendars-gap, 16px);flex:1;}\n\n  /* Dual-month shared nav header */.drp-dual-header.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:8px;}.drp-dual-month-labels.svelte-gpybdi {display:flex;flex:1;justify-content:space-around;}.drp-month-label.svelte-gpybdi {color:var(--drp-month-label-color, inherit);text-transform:capitalize;}.drp-nav-btn.svelte-gpybdi {display:inline-flex;align-items:center;justify-content:center;width:var(--drp-nav-btn-size, 32px);height:var(--drp-nav-btn-size, 32px);background:none;border:none;border-radius:var(--drp-nav-btn-border-radius, var(--radius, 4px));cursor:pointer;color:var(--drp-nav-btn-color, inherit);transition:background var(--drp-nav-btn-transition-duration, var(--motion-duration, 0.12s))\n      var(--drp-nav-btn-transition-easing, var(--motion-easing, ease));padding:0;}.drp-nav-btn.svelte-gpybdi:hover {background:var(--drp-nav-btn-hover-background, #f0f0f0);}\n\n  /* CSS-only chevrons for the dual-nav */.drp-nav-chevron.svelte-gpybdi {display:inline-block;width:8px;height:8px;border-right:var(--drp-nav-chevron-border, 2px solid currentColor);border-top:var(--drp-nav-chevron-border, 2px solid currentColor);}.drp-nav-chevron-left.svelte-gpybdi {transform:rotate(-135deg);margin-left:2px;}.drp-nav-chevron-right.svelte-gpybdi {transform:rotate(45deg);margin-right:2px;}.drp-months-row.svelte-gpybdi {display:flex;gap:var(--drp-months-gap, 24px);}\n\n  /* Embedded calendar: strip outer chrome so only the grid shows */.drp-calendar-embedded {--calendar-border: none;--calendar-box-shadow: none;--calendar-background: transparent;--calendar-padding: 0;}\n\n  /* Suppress Calendar's own header in dual-month mode; single mode keeps it for navigation */.drp-months-row .drp-calendar-embedded {--calendar-header-display: none;}\n\n  /* ── Time picker slot ── */.drp-time-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-time-row-gap, 16px);padding-top:var(--drp-time-row-padding-top, 8px);border-top:var(--drp-time-divider, 1px solid #e8e8e8);flex-wrap:wrap;}\n\n  /* ── Built-in date + time inputs (showDateInputs / showTimeSelection) ── */.drp-datetime-header.svelte-gpybdi {display:flex;flex-direction:column;gap:var(--drp-datetime-gap, 8px);padding-bottom:var(--drp-datetime-padding-bottom, 12px);margin-bottom:var(--drp-datetime-margin-bottom, 4px);border-bottom:var(--drp-datetime-divider, 1px solid #e8e8e8);}.drp-date-input-row.svelte-gpybdi,\n  .drp-time-input-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-datetime-row-gap, 12px);}.drp-date-input.svelte-gpybdi {flex:1;min-width:0;padding:var(--drp-date-input-padding, 10px 14px);border:var(--drp-date-input-border, 1px solid #d4d4d4);border-radius:var(--drp-date-input-radius, var(--radius, 4px));background:var(--drp-date-input-background, #ffffff);}.drp-date-input-invalid.svelte-gpybdi {border-color:var(--drp-date-input-invalid-border, #e5484d);}.drp-date-input-value.svelte-gpybdi {display:block;width:100%;min-width:0;padding:0;border:none;outline:none;background:transparent;color:var(--drp-date-input-color, #333333);font-size:var(--drp-date-input-font-size, 13px);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.drp-date-input-value.svelte-gpybdi::placeholder {color:var(--drp-date-input-placeholder-color, #aaaaaa);}.drp-datetime-arrow.svelte-gpybdi {flex-shrink:0;display:inline-flex;width:var(--drp-datetime-arrow-size, 16px);height:var(--drp-datetime-arrow-size, 16px);color:var(--drp-datetime-arrow-color, #888888);}.drp-datetime-arrow.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-toggle.svelte-gpybdi {flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--drp-time-toggle-size, 40px);height:var(--drp-time-toggle-size, 40px);padding:0;border:var(--drp-time-toggle-border, 1px solid #d4d4d4);border-radius:var(--drp-time-toggle-radius, var(--radius, 4px));background:var(--drp-time-toggle-background, #f6f7f9);color:var(--drp-time-toggle-color, #555555);cursor:pointer;}.drp-time-toggle-active.svelte-gpybdi {border-color:var(--drp-time-toggle-active-border, currentColor);color:var(--drp-time-toggle-active-color, #1b85ff);}.drp-time-toggle-icon.svelte-gpybdi {display:inline-flex;width:var(--drp-time-toggle-icon-size, 16px);height:var(--drp-time-toggle-icon-size, 16px);}.drp-time-toggle-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-input.svelte-gpybdi {position:relative;flex:1;min-width:0;display:flex;align-items:center;border:var(--drp-time-input-border, 1px solid #d4d4d4);border-radius:var(--drp-time-input-radius, var(--radius, 4px));background:var(--drp-time-input-background, #ffffff);}.drp-time-input-invalid.svelte-gpybdi {border-color:var(--drp-time-input-invalid-border, #e5484d);}.drp-time-input-icon.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-time-input-icon-size, 16px);height:var(--drp-time-input-icon-size, 16px);margin-left:var(--drp-time-input-icon-gap, 12px);color:var(--drp-time-input-icon-color, #888888);pointer-events:none;}.drp-time-input-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-field.svelte-gpybdi {flex:1;min-width:0;width:100%;padding:var(--drp-time-field-padding, 10px 14px 10px 8px);border:none;outline:none;background:transparent;color:var(--drp-time-field-color, #333333);font-size:var(--drp-time-field-font-size, 13px);font-family:inherit;}.drp-time-field.svelte-gpybdi::placeholder {color:var(--drp-time-field-placeholder-color, #aaaaaa);}\n\n  /* ── Inline time layout (timeSelectionLayout=\"inline\") ── */\n  /* Each date input is paired with its time input on the same row: the date box\n     flexes to fill, the time input takes a fixed compact width beside it. */.drp-date-time-group.svelte-gpybdi {display:flex;align-items:center;flex:1;min-width:0;gap:var(--drp-datetime-inline-gap, 8px);}.drp-date-time-group.svelte-gpybdi .drp-date-input:where(.svelte-gpybdi) {flex:1;}.drp-time-input.drp-time-input-inline.svelte-gpybdi {flex:0 0 var(--drp-time-inline-width, 116px);}\n\n  /* ── Compare calendar slot ── */.drp-compare-section.svelte-gpybdi {display:flex;flex-direction:column;gap:8px;padding-top:var(--drp-compare-padding-top, 12px);border-top:var(--drp-compare-divider, 1px solid #e8e8e8);}\n\n  /* ── Footer ── */.drp-footer.svelte-gpybdi {display:flex;justify-content:flex-end;align-items:center;gap:var(--drp-footer-gap, 8px);padding:var(--drp-footer-padding, 12px 16px);border-top:var(--drp-footer-border, 1px solid #e8e8e8);}\n\n  /* ── Preset group dividers ── */.drp-preset-divider.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-preset-divider-gap, 6px);margin:var(--drp-preset-divider-margin, 4px 0);padding:0 var(--drp-preset-padding-left, 12px);}.drp-preset-divider.svelte-gpybdi::before {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}.drp-preset-group-label.svelte-gpybdi {color:var(--drp-preset-group-label-color, #999999);white-space:nowrap;flex-shrink:0;}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi)) {padding-right:var(--drp-preset-padding-right, 12px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::before {flex:none;width:var(--drp-preset-divider-leader-width, 8px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::after {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}\n\n  /* Cancel button variant via Button's CSS vars */.drp-btn-cancel {--button-color: transparent;--button-border: 1px solid var(--drp-cancel-border-color, #d0d0d0);--button-text-color: var(--drp-cancel-color, inherit);--button-hover-color: var(--drp-cancel-hover-background, #f5f5f5);}\n\n  /* Clear button variant (single-mode reset) */.drp-btn-clear {--button-color: transparent;--button-border: 1px solid var(--drp-clear-border-color, #d0d0d0);--button-text-color: var(--drp-clear-color, inherit);--button-hover-color: var(--drp-clear-hover-background, #f5f5f5);margin-right:auto;}\n\n  /* Apply button variant */.drp-btn-apply {--button-color: var(--drp-apply-background, currentColor);--button-border: none;--button-text-color: var(--drp-apply-color, #ffffff);--button-hover-color: var(--drp-apply-hover-background, #333333);--disabled-background-color: var(--drp-apply-disabled-background, #cccccc);--disabled-text-color: var(--drp-apply-disabled-color, #888888);}\n\n  /* ── Compare standalone trigger ── */.drp-compare-trigger-wrapper.svelte-gpybdi {display:inline-block;position:relative;--button-color: var(--drp-compare-trigger-background, inherit);--button-border: var(--drp-compare-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-compare-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-compare-trigger-color, inherit);--button-padding: var(--drp-compare-trigger-padding, 8px 12px);--button-min-width: var(--drp-compare-trigger-min-width, 160px);}.drp-compare-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}\n\n  /* ── Compare standalone panel ── */.drp-compare-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));left:var(--drp-compare-panel-left, 0);z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-compare-panel-min-width, 280px);overflow:hidden;}.drp-compare-panel-body.svelte-gpybdi {padding:var(--drp-calendars-padding, 16px);}"
+	code: ".drp-field-error.svelte-gpybdi {display:block;color:var(--drp-field-error-color, #b3261e);font-size:var(--drp-field-error-font-size, 11px);line-height:var(--drp-field-error-line-height, 1.4);margin-top:var(--drp-field-error-margin-top, 2px);}.drp-root.svelte-gpybdi {position:relative;display:inline-block;}\n\n  /* ── Trigger wrapper ── */.drp-trigger-wrapper.svelte-gpybdi {display:inline-block;}\n\n  /* Bridge drp-trigger CSS vars to Button CSS vars on the wrapper */.drp-trigger-wrapper.svelte-gpybdi {--button-color: var(--drp-trigger-background, inherit);--button-border: var(--drp-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-trigger-color, inherit);--button-padding: var(--drp-trigger-padding, 8px 12px);--button-min-width: var(--drp-trigger-min-width, 200px);--button-gap: var(--drp-trigger-gap, 8px);--button-hover-border: var(\n      --drp-trigger-hover-border,\n      var(--drp-trigger-border, 1px solid currentColor)\n    );}.drp-trigger-wrapper .drp-trigger {display:inline-flex;align-items:center;gap:var(--drp-trigger-gap, 8px);white-space:nowrap;min-width:var(--drp-trigger-min-width, 200px);}.drp-trigger-wrapper .drp-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}.drp-trigger-label.svelte-gpybdi {flex:1;text-align:left;}.drp-trigger-icon.svelte-gpybdi {display:inline-flex;align-items:center;color:var(--drp-trigger-icon-color, inherit);flex-shrink:0;}\n\n  /* ── Panel ── */.drp-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-panel-min-width, 320px);max-width:var(--drp-panel-max-width, 760px);max-height:var(--drp-panel-max-height, calc(100dvh - 80px));overflow:hidden;}\n\n  /* Set only when the panel would not fit below the trigger — see positionPanel(). */.drp-panel-above.svelte-gpybdi {top:auto;bottom:calc(100% + var(--drp-panel-offset, 6px));}.drp-panel-align-left.svelte-gpybdi {left:0;right:auto;}.drp-panel-align-right.svelte-gpybdi {right:0;left:auto;}.drp-panel-inner.svelte-gpybdi {display:flex;flex-direction:row;flex:1;min-height:0;overflow-y:auto;}\n\n  /* ── Sidebar ── */.drp-sidebar.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-sidebar-padding, 12px 8px);border-right:var(--drp-sidebar-border, 1px solid #e8e8e8);min-width:var(--drp-sidebar-min-width, 140px);gap:2px;overflow-y:auto;max-height:var(--drp-sidebar-max-height, 400px);}.drp-preset-item.svelte-gpybdi {display:block;width:100%;text-align:left;padding:var(--drp-preset-padding, 7px 12px);background:none;border:none;border-radius:var(--drp-preset-border-radius, var(--radius, 4px));color:var(--drp-preset-color, inherit);cursor:pointer;white-space:nowrap;transition:background var(--drp-preset-item-transition-duration, var(--motion-duration, 0.12s))\n      var(--drp-preset-item-transition-easing, var(--motion-easing, ease));}.drp-preset-item.svelte-gpybdi:hover {background:var(--drp-preset-hover-background, #f5f5f5);}.drp-preset-active.svelte-gpybdi {background:var(--drp-preset-active-background, currentColor);color:var(--drp-preset-active-color, #ffffff);}.drp-preset-active.svelte-gpybdi:hover {background:var(--drp-preset-active-hover-background, #333333);}\n\n  /* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick\n     sits flush-right while the label stays left. A preset with no tick (or a\n     label-only preset) keeps its single flex child at the start, unchanged. */.drp-preset-checkable.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:var(--drp-preset-check-gap, 8px);}.drp-preset-check.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-preset-check-size, 16px);height:var(--drp-preset-check-size, 16px);color:var(--drp-preset-check-color, inherit);}.drp-preset-check.svelte-gpybdi svg {width:100%;height:100%;}\n\n  /* ── Calendar area ── */.drp-calendars.svelte-gpybdi {display:flex;flex-direction:column;padding:var(--drp-calendars-padding, 16px);gap:var(--drp-calendars-gap, 16px);flex:1;}\n\n  /* Dual-month shared nav header */.drp-dual-header.svelte-gpybdi {display:flex;align-items:center;justify-content:space-between;gap:8px;}.drp-dual-month-labels.svelte-gpybdi {display:flex;flex:1;justify-content:space-around;}.drp-month-label.svelte-gpybdi {color:var(--drp-month-label-color, inherit);text-transform:capitalize;}.drp-nav-btn.svelte-gpybdi {display:inline-flex;align-items:center;justify-content:center;width:var(--drp-nav-btn-size, 32px);height:var(--drp-nav-btn-size, 32px);background:none;border:none;border-radius:var(--drp-nav-btn-border-radius, var(--radius, 4px));cursor:pointer;color:var(--drp-nav-btn-color, inherit);transition:background var(--drp-nav-btn-transition-duration, var(--motion-duration, 0.12s))\n      var(--drp-nav-btn-transition-easing, var(--motion-easing, ease));padding:0;}.drp-nav-btn.svelte-gpybdi:hover {background:var(--drp-nav-btn-hover-background, #f0f0f0);}\n\n  /* CSS-only chevrons for the dual-nav */.drp-nav-chevron.svelte-gpybdi {display:inline-block;width:8px;height:8px;border-right:var(--drp-nav-chevron-border, 2px solid currentColor);border-top:var(--drp-nav-chevron-border, 2px solid currentColor);}.drp-nav-chevron-left.svelte-gpybdi {transform:rotate(-135deg);margin-left:2px;}.drp-nav-chevron-right.svelte-gpybdi {transform:rotate(45deg);margin-right:2px;}.drp-months-row.svelte-gpybdi {display:flex;gap:var(--drp-months-gap, 24px);}\n\n  /* Embedded calendar: strip outer chrome so only the grid shows */.drp-calendar-embedded {--calendar-border: none;--calendar-box-shadow: none;--calendar-background: transparent;--calendar-padding: 0;}\n\n  /* Suppress Calendar's own header in dual-month mode; single mode keeps it for navigation */.drp-months-row .drp-calendar-embedded {--calendar-header-display: none;}\n\n  /* ── Time picker slot ── */.drp-time-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-time-row-gap, 16px);padding-top:var(--drp-time-row-padding-top, 8px);border-top:var(--drp-time-divider, 1px solid #e8e8e8);flex-wrap:wrap;}\n\n  /* ── Built-in date + time inputs (showDateInputs / showTimeSelection) ── */.drp-datetime-header.svelte-gpybdi {display:flex;flex-direction:column;gap:var(--drp-datetime-gap, 8px);padding-bottom:var(--drp-datetime-padding-bottom, 12px);margin-bottom:var(--drp-datetime-margin-bottom, 4px);border-bottom:var(--drp-datetime-divider, 1px solid #e8e8e8);}.drp-date-input-row.svelte-gpybdi,\n  .drp-time-input-row.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-datetime-row-gap, 12px);}.drp-date-input.svelte-gpybdi {flex:1;min-width:0;padding:var(--drp-date-input-padding, 10px 14px);border:var(--drp-date-input-border, 1px solid #d4d4d4);border-radius:var(--drp-date-input-radius, var(--radius, 4px));background:var(--drp-date-input-background, #ffffff);}.drp-date-input-invalid.svelte-gpybdi {border-color:var(--drp-date-input-invalid-border, #e5484d);}\n\n  /* .drp-date-input-value below sets outline: none with nothing standing in\n     for it, so the visible replacement lives on the bordered wrapper instead\n     -- :focus-within lights up whenever the text input inside is focused.\n     class:drp-date-input-invalid sits alongside .drp-date-input on the same\n     div (see markup), and :focus-within's extra pseudo-class outweighs that\n     single class, so a focused invalid field shows the focus border, not the\n     invalid one -- focus location is the more time-sensitive signal. */.drp-date-input.svelte-gpybdi:focus-within {border-color:var(--drp-date-input-focus-border, #2563eb);box-shadow:var(--drp-date-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-date-input-value.svelte-gpybdi {display:block;width:100%;min-width:0;padding:0;border:none;outline:none;background:transparent;color:var(--drp-date-input-color, #333333);font-size:var(--drp-date-input-font-size, 13px);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.drp-date-input-value.svelte-gpybdi::placeholder {color:var(--drp-date-input-placeholder-color, #aaaaaa);}.drp-datetime-arrow.svelte-gpybdi {flex-shrink:0;display:inline-flex;width:var(--drp-datetime-arrow-size, 16px);height:var(--drp-datetime-arrow-size, 16px);color:var(--drp-datetime-arrow-color, #888888);}.drp-datetime-arrow.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-toggle.svelte-gpybdi {flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--drp-time-toggle-size, 40px);height:var(--drp-time-toggle-size, 40px);padding:0;border:var(--drp-time-toggle-border, 1px solid #d4d4d4);border-radius:var(--drp-time-toggle-radius, var(--radius, 4px));background:var(--drp-time-toggle-background, #f6f7f9);color:var(--drp-time-toggle-color, #555555);cursor:pointer;}.drp-time-toggle-active.svelte-gpybdi {border-color:var(--drp-time-toggle-active-border, currentColor);color:var(--drp-time-toggle-active-color, #1b85ff);}.drp-time-toggle-icon.svelte-gpybdi {display:inline-flex;width:var(--drp-time-toggle-icon-size, 16px);height:var(--drp-time-toggle-icon-size, 16px);}.drp-time-toggle-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-input.svelte-gpybdi {position:relative;flex:1;min-width:0;display:flex;align-items:center;border:var(--drp-time-input-border, 1px solid #d4d4d4);border-radius:var(--drp-time-input-radius, var(--radius, 4px));background:var(--drp-time-input-background, #ffffff);}.drp-time-input-invalid.svelte-gpybdi {border-color:var(--drp-time-input-invalid-border, #e5484d);}\n\n  /* .drp-time-field below sets outline: none with nothing standing in for it;\n     same fix as .drp-date-input:focus-within above, same specificity\n     reasoning against .drp-time-input-invalid. */.drp-time-input.svelte-gpybdi:focus-within {border-color:var(--drp-time-input-focus-border, #2563eb);box-shadow:var(--drp-time-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.drp-time-input-icon.svelte-gpybdi {display:inline-flex;flex-shrink:0;width:var(--drp-time-input-icon-size, 16px);height:var(--drp-time-input-icon-size, 16px);margin-left:var(--drp-time-input-icon-gap, 12px);color:var(--drp-time-input-icon-color, #888888);pointer-events:none;}.drp-time-input-icon.svelte-gpybdi svg {width:100%;height:100%;}.drp-time-field.svelte-gpybdi {flex:1;min-width:0;width:100%;padding:var(--drp-time-field-padding, 10px 14px 10px 8px);border:none;outline:none;background:transparent;color:var(--drp-time-field-color, #333333);font-size:var(--drp-time-field-font-size, 13px);font-family:inherit;}.drp-time-field.svelte-gpybdi::placeholder {color:var(--drp-time-field-placeholder-color, #aaaaaa);}\n\n  /* ── Inline time layout (timeSelectionLayout=\"inline\") ── */\n  /* Each date input is paired with its time input on the same row: the date box\n     flexes to fill, the time input takes a fixed compact width beside it. */.drp-date-time-group.svelte-gpybdi {display:flex;align-items:center;flex:1;min-width:0;gap:var(--drp-datetime-inline-gap, 8px);}.drp-date-time-group.svelte-gpybdi .drp-date-input:where(.svelte-gpybdi) {flex:1;}.drp-time-input.drp-time-input-inline.svelte-gpybdi {flex:0 0 var(--drp-time-inline-width, 116px);}\n\n  /* ── Compare calendar slot ── */.drp-compare-section.svelte-gpybdi {display:flex;flex-direction:column;gap:8px;padding-top:var(--drp-compare-padding-top, 12px);border-top:var(--drp-compare-divider, 1px solid #e8e8e8);}\n\n  /* ── Footer ── */.drp-footer.svelte-gpybdi {display:flex;justify-content:flex-end;align-items:center;gap:var(--drp-footer-gap, 8px);padding:var(--drp-footer-padding, 12px 16px);border-top:var(--drp-footer-border, 1px solid #e8e8e8);}\n\n  /* ── Preset group dividers ── */.drp-preset-divider.svelte-gpybdi {display:flex;align-items:center;gap:var(--drp-preset-divider-gap, 6px);margin:var(--drp-preset-divider-margin, 4px 0);padding:0 var(--drp-preset-padding-left, 12px);}.drp-preset-divider.svelte-gpybdi::before {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}.drp-preset-group-label.svelte-gpybdi {color:var(--drp-preset-group-label-color, #999999);white-space:nowrap;flex-shrink:0;}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi)) {padding-right:var(--drp-preset-padding-right, 12px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::before {flex:none;width:var(--drp-preset-divider-leader-width, 8px);}.drp-preset-divider.svelte-gpybdi:has(.drp-preset-group-label:where(.svelte-gpybdi))::after {content:'';flex:1;height:0;border-top:var(--drp-preset-divider-border, 1px solid #e8e8e8);}\n\n  /* Cancel button variant via Button's CSS vars */.drp-btn-cancel {--button-color: transparent;--button-border: 1px solid var(--drp-cancel-border-color, #d0d0d0);--button-text-color: var(--drp-cancel-color, inherit);--button-hover-color: var(--drp-cancel-hover-background, #f5f5f5);}\n\n  /* Clear button variant (single-mode reset) */.drp-btn-clear {--button-color: transparent;--button-border: 1px solid var(--drp-clear-border-color, #d0d0d0);--button-text-color: var(--drp-clear-color, inherit);--button-hover-color: var(--drp-clear-hover-background, #f5f5f5);margin-right:auto;}\n\n  /* Apply button variant */.drp-btn-apply {--button-color: var(--drp-apply-background, currentColor);--button-border: none;--button-text-color: var(--drp-apply-color, #ffffff);--button-hover-color: var(--drp-apply-hover-background, #333333);--disabled-background-color: var(--drp-apply-disabled-background, #cccccc);--disabled-text-color: var(--drp-apply-disabled-color, #888888);}\n\n  /* ── Compare standalone trigger ── */.drp-compare-trigger-wrapper.svelte-gpybdi {display:inline-block;position:relative;--button-color: var(--drp-compare-trigger-background, inherit);--button-border: var(--drp-compare-trigger-border, 1px solid currentColor);--button-border-radius: var(--drp-compare-trigger-border-radius, var(--radius, 4px));--button-text-color: var(--drp-compare-trigger-color, inherit);--button-padding: var(--drp-compare-trigger-padding, 8px 12px);--button-min-width: var(--drp-compare-trigger-min-width, 160px);}.drp-compare-trigger-open {border-color:var(--drp-trigger-open-border-color, #000000);box-shadow:var(--drp-trigger-open-shadow, 0 0 0 2px rgba(0, 0, 0, 0.1));}\n\n  /* ── Compare standalone panel ── */.drp-compare-panel.svelte-gpybdi {position:absolute;top:calc(100% + var(--drp-panel-offset, 6px));left:var(--drp-compare-panel-left, 0);z-index:var(--drp-panel-z-index, 1000);background:var(--drp-panel-background, #ffffff);border:var(--drp-panel-border, 1px solid #e0e0e0);border-radius:var(--drp-panel-border-radius, var(--radius, 4px));box-shadow:var(--drp-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));display:flex;flex-direction:column;min-width:var(--drp-compare-panel-min-width, 280px);overflow:hidden;}.drp-compare-panel-body.svelte-gpybdi {padding:var(--drp-calendars-padding, 16px);}"
 };
 function DateRangePicker(e, t) {
 	let n = props_id();
@@ -24272,7 +24718,7 @@ function DateRangePicker(e, t) {
 		if (get(Pt).trim() === "") return !0;
 		let e = parseDateDisplay(get(Pt));
 		return e !== null && zn("end", e);
-	}), Hn = `${n}-start-date-error`, Un = `${n}-start-time-error`, Wn = `${n}-end-date-error`, Gn = `${n}-end-time-error`, Kn = "Enter a date this picker accepts, like 12 Mar 2025.", qn = "Enter a time like 12:00 AM.";
+	}), Hn = "Enter a date this picker accepts, like 12 Mar 2025.", Un = "Enter a time like 12:00 AM.", Wn = /* @__PURE__ */ user_derived(() => describeField(`${n}-start-date`, { error: get(Bn) ? null : Hn })), Gn = /* @__PURE__ */ user_derived(() => describeField(`${n}-start-time`, { error: get(hn) ? null : Un })), Kn = /* @__PURE__ */ user_derived(() => describeField(`${n}-end-date`, { error: get(Vn) ? null : Hn })), qn = /* @__PURE__ */ user_derived(() => describeField(`${n}-end-time`, { error: get(gn) ? null : Un }));
 	function Jn(e) {
 		let t = e.getFullYear() === get(sn) && e.getMonth() === get(cn);
 		if (!get(xt)) return t;
@@ -24708,9 +25154,9 @@ function DateRangePicker(e, t) {
 				var u = child(c);
 				html(u, () => i, !0), reset(u);
 				var f = sibling(u, 2);
-				remove_input_defaults(f), reset(c), drpFieldError(sibling(c, 2), () => Hn, () => !get(Bn), () => Kn), reset(n);
+				remove_input_defaults(f), reset(c), drpFieldError(sibling(c, 2), () => get(Wn).errorId, () => get(Wn).showsError, () => Hn), reset(n);
 				var p = sibling(n, 2);
-				drpFieldError(p, () => Un, () => !get(hn), () => qn);
+				drpFieldError(p, () => get(Gn).errorId, () => get(Gn).showsError, () => Un);
 				var h = sibling(p, 2);
 				html(h, () => chevron_right_default, !0), reset(h);
 				var S = sibling(h, 2), C = child(S);
@@ -24722,20 +25168,20 @@ function DateRangePicker(e, t) {
 				var re = child(te);
 				html(re, () => i, !0), reset(re);
 				var G = sibling(re, 2);
-				remove_input_defaults(G), reset(te), drpFieldError(sibling(te, 2), () => Wn, () => !get(Vn), () => Kn), reset(S), drpFieldError(sibling(S, 2), () => Gn, () => !get(gn), () => qn), template_effect(() => {
-					o = set_class(a, 1, "drp-date-input svelte-gpybdi", null, o, { "drp-date-input-invalid": !get(Bn) }), set_value(s, get(Nt)), set_attribute(s, "aria-invalid", !get(Bn)), set_attribute(s, "aria-describedby", get(Bn) ? null : Hn), set_attribute(s, "data-pw", ot() ? `${ot()}-start-date` : null), set_attribute(s, "testid", ot() ? `${ot()}-start-date` : null), l = set_class(c, 1, "drp-time-input drp-time-input-inline svelte-gpybdi", null, l, { "drp-time-input-invalid": !get(hn) }), set_attribute(f, "aria-invalid", !get(hn)), set_attribute(f, "aria-describedby", get(hn) ? null : Un), set_attribute(f, "data-pw", ot() ? `${ot()}-start-time` : null), set_attribute(f, "testid", ot() ? `${ot()}-start-time` : null), k = set_class(C, 1, "drp-date-input svelte-gpybdi", null, k, { "drp-date-input-invalid": !get(Vn) }), set_value(R, get(Pt)), set_attribute(R, "aria-invalid", !get(Vn)), set_attribute(R, "aria-describedby", get(Vn) ? null : Wn), set_attribute(R, "data-pw", ot() ? `${ot()}-end-date` : null), set_attribute(R, "testid", ot() ? `${ot()}-end-date` : null), ne = set_class(te, 1, "drp-time-input drp-time-input-inline svelte-gpybdi", null, ne, { "drp-time-input-invalid": !get(gn) }), set_attribute(G, "aria-invalid", !get(gn)), set_attribute(G, "aria-describedby", get(gn) ? null : Gn), set_attribute(G, "data-pw", ot() ? `${ot()}-end-time` : null), set_attribute(G, "testid", ot() ? `${ot()}-end-time` : null);
+				remove_input_defaults(G), reset(te), drpFieldError(sibling(te, 2), () => get(Kn).errorId, () => get(Kn).showsError, () => Hn), reset(S), drpFieldError(sibling(S, 2), () => get(qn).errorId, () => get(qn).showsError, () => Un), template_effect(() => {
+					o = set_class(a, 1, "drp-date-input svelte-gpybdi", null, o, { "drp-date-input-invalid": !get(Bn) }), set_value(s, get(Nt)), set_attribute(s, "aria-invalid", !get(Bn)), set_attribute(s, "aria-describedby", get(Wn).describedBy), set_attribute(s, "data-pw", ot() ? `${ot()}-start-date` : null), set_attribute(s, "testid", ot() ? `${ot()}-start-date` : null), l = set_class(c, 1, "drp-time-input drp-time-input-inline svelte-gpybdi", null, l, { "drp-time-input-invalid": !get(hn) }), set_attribute(f, "aria-invalid", !get(hn)), set_attribute(f, "aria-describedby", get(Gn).describedBy), set_attribute(f, "data-pw", ot() ? `${ot()}-start-time` : null), set_attribute(f, "testid", ot() ? `${ot()}-start-time` : null), k = set_class(C, 1, "drp-date-input svelte-gpybdi", null, k, { "drp-date-input-invalid": !get(Vn) }), set_value(R, get(Pt)), set_attribute(R, "aria-invalid", !get(Vn)), set_attribute(R, "aria-describedby", get(Kn).describedBy), set_attribute(R, "data-pw", ot() ? `${ot()}-end-date` : null), set_attribute(R, "testid", ot() ? `${ot()}-end-date` : null), ne = set_class(te, 1, "drp-time-input drp-time-input-inline svelte-gpybdi", null, ne, { "drp-time-input-invalid": !get(gn) }), set_attribute(G, "aria-invalid", !get(gn)), set_attribute(G, "aria-describedby", get(qn).describedBy), set_attribute(G, "data-pw", ot() ? `${ot()}-end-time` : null), set_attribute(G, "testid", ot() ? `${ot()}-end-time` : null);
 				}), delegated("input", s, (e) => Zn(e, "start")), event("blur", s, () => Qn("start")), delegated("keydown", s, (e) => $n(e, "start")), bind_value(f, () => get(Ot), (e) => set(Ot, e)), delegated("input", R, (e) => Zn(e, "end")), event("blur", R, () => Qn("end")), delegated("keydown", R, (e) => $n(e, "end")), bind_value(G, () => get(kt), (e) => set(kt, e)), append(e, t);
 			}, c = (e) => {
 				var t = root_12$9(), n = first_child(t);
 				let a;
 				var o = child(n);
-				remove_input_defaults(o), drpFieldError(sibling(o, 2), () => Hn, () => !get(Bn), () => Kn), reset(n);
+				remove_input_defaults(o), drpFieldError(sibling(o, 2), () => get(Wn).errorId, () => get(Wn).showsError, () => Hn), reset(n);
 				var s = sibling(n, 2);
 				html(s, () => chevron_right_default, !0), reset(s);
 				var c = sibling(s, 2);
 				let l;
 				var u = child(c);
-				remove_input_defaults(u), drpFieldError(sibling(u, 2), () => Wn, () => !get(Vn), () => Kn), reset(c);
+				remove_input_defaults(u), drpFieldError(sibling(u, 2), () => get(Kn).errorId, () => get(Kn).showsError, () => Hn), reset(c);
 				var f = sibling(c, 2), p = (e) => {
 					var t = root_11$10();
 					let n;
@@ -24747,7 +25193,7 @@ function DateRangePicker(e, t) {
 				if_block(f, (e) => {
 					k() && e(p);
 				}), template_effect(() => {
-					a = set_class(n, 1, "drp-date-input svelte-gpybdi", null, a, { "drp-date-input-invalid": !get(Bn) }), set_value(o, get(Nt)), set_attribute(o, "aria-invalid", !get(Bn)), set_attribute(o, "aria-describedby", get(Bn) ? null : Hn), set_attribute(o, "data-pw", ot() ? `${ot()}-start-date` : null), set_attribute(o, "testid", ot() ? `${ot()}-start-date` : null), l = set_class(c, 1, "drp-date-input svelte-gpybdi", null, l, { "drp-date-input-invalid": !get(Vn) }), set_value(u, get(Pt)), set_attribute(u, "aria-invalid", !get(Vn)), set_attribute(u, "aria-describedby", get(Vn) ? null : Wn), set_attribute(u, "data-pw", ot() ? `${ot()}-end-date` : null), set_attribute(u, "testid", ot() ? `${ot()}-end-date` : null);
+					a = set_class(n, 1, "drp-date-input svelte-gpybdi", null, a, { "drp-date-input-invalid": !get(Bn) }), set_value(o, get(Nt)), set_attribute(o, "aria-invalid", !get(Bn)), set_attribute(o, "aria-describedby", get(Wn).describedBy), set_attribute(o, "data-pw", ot() ? `${ot()}-start-date` : null), set_attribute(o, "testid", ot() ? `${ot()}-start-date` : null), l = set_class(c, 1, "drp-date-input svelte-gpybdi", null, l, { "drp-date-input-invalid": !get(Vn) }), set_value(u, get(Pt)), set_attribute(u, "aria-invalid", !get(Vn)), set_attribute(u, "aria-describedby", get(Kn).describedBy), set_attribute(u, "data-pw", ot() ? `${ot()}-end-date` : null), set_attribute(u, "testid", ot() ? `${ot()}-end-date` : null);
 				}), delegated("input", o, (e) => Zn(e, "start")), event("blur", o, () => Qn("start")), delegated("keydown", o, (e) => $n(e, "start")), delegated("input", u, (e) => Zn(e, "end")), event("blur", u, () => Qn("end")), delegated("keydown", u, (e) => $n(e, "end")), append(e, t);
 			};
 			if_block(o, (e) => {
@@ -24759,7 +25205,7 @@ function DateRangePicker(e, t) {
 				var o = child(n);
 				html(o, () => i, !0), reset(o);
 				var s = sibling(o, 2);
-				remove_input_defaults(s), drpFieldError(sibling(s, 2), () => Un, () => !get(hn), () => qn), reset(n);
+				remove_input_defaults(s), drpFieldError(sibling(s, 2), () => get(Gn).errorId, () => get(Gn).showsError, () => Un), reset(n);
 				var c = sibling(n, 2);
 				html(c, () => chevron_right_default, !0), reset(c);
 				var l = sibling(c, 2);
@@ -24767,8 +25213,8 @@ function DateRangePicker(e, t) {
 				var f = child(l);
 				html(f, () => i, !0), reset(f);
 				var p = sibling(f, 2);
-				remove_input_defaults(p), drpFieldError(sibling(p, 2), () => Gn, () => !get(gn), () => qn), reset(l), reset(t), template_effect(() => {
-					a = set_class(n, 1, "drp-time-input svelte-gpybdi", null, a, { "drp-time-input-invalid": !get(hn) }), set_attribute(s, "aria-invalid", !get(hn)), set_attribute(s, "aria-describedby", get(hn) ? null : Un), set_attribute(s, "data-pw", ot() ? `${ot()}-start-time` : null), set_attribute(s, "testid", ot() ? `${ot()}-start-time` : null), u = set_class(l, 1, "drp-time-input svelte-gpybdi", null, u, { "drp-time-input-invalid": !get(gn) }), set_attribute(p, "aria-invalid", !get(gn)), set_attribute(p, "aria-describedby", get(gn) ? null : Gn), set_attribute(p, "data-pw", ot() ? `${ot()}-end-time` : null), set_attribute(p, "testid", ot() ? `${ot()}-end-time` : null);
+				remove_input_defaults(p), drpFieldError(sibling(p, 2), () => get(qn).errorId, () => get(qn).showsError, () => Un), reset(l), reset(t), template_effect(() => {
+					a = set_class(n, 1, "drp-time-input svelte-gpybdi", null, a, { "drp-time-input-invalid": !get(hn) }), set_attribute(s, "aria-invalid", !get(hn)), set_attribute(s, "aria-describedby", get(Gn).describedBy), set_attribute(s, "data-pw", ot() ? `${ot()}-start-time` : null), set_attribute(s, "testid", ot() ? `${ot()}-start-time` : null), u = set_class(l, 1, "drp-time-input svelte-gpybdi", null, u, { "drp-time-input-invalid": !get(gn) }), set_attribute(p, "aria-invalid", !get(gn)), set_attribute(p, "aria-describedby", get(qn).describedBy), set_attribute(p, "data-pw", ot() ? `${ot()}-end-time` : null), set_attribute(p, "testid", ot() ? `${ot()}-end-time` : null);
 				}), bind_value(s, () => get(Ot), (e) => set(Ot, e)), bind_value(p, () => get(kt), (e) => set(kt, e)), append(e, t);
 			};
 			if_block(l, (e) => {
@@ -24910,7 +25356,7 @@ function DateRangePicker(e, t) {
 			get(xt) ? e(Me) : e(Re, -1);
 		});
 		var ct = sibling(re, 2), lt = (e) => {
-			var t = root_17$2();
+			var t = root_17$3();
 			snippet(child(t), G), reset(t), append(e, t);
 		};
 		if_block(ct, (e) => {
@@ -32485,14 +32931,14 @@ customElements.define("sui-lottie-player", create_custom_element(LottiePlayer_wc
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/DeltaIndicator/DeltaIndicator.svelte
-var root$36 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" class=\"svelte-1h4ulcy\"><path d=\"M22 7L13.5 15.5L8.5 10.5L2 17\"></path><path d=\"M16 7H22V13\"></path></svg></span>"), root_1$35 = /* @__PURE__ */ from_html("<span class=\"delta-indicator-dash svelte-1h4ulcy\" aria-hidden=\"true\">—</span>"), root_2$26 = /* @__PURE__ */ from_html("<span><!> <span class=\"delta-indicator-text svelte-1h4ulcy\"> </span></span>"), $$css$75 = {
+var root$36 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" class=\"svelte-1h4ulcy\"><path d=\"M22 7L13.5 15.5L8.5 10.5L2 17\"></path><path d=\"M16 7H22V13\"></path></svg></span>"), root_1$35 = /* @__PURE__ */ from_html("<span class=\"delta-indicator-dash svelte-1h4ulcy\" aria-hidden=\"true\">—</span>"), root_2$26 = /* @__PURE__ */ from_html("<span><!> <span class=\"delta-indicator-text svelte-1h4ulcy\"><!></span></span>"), $$css$75 = {
 	hash: "svelte-1h4ulcy",
 	code: ".delta-indicator.svelte-1h4ulcy {display:inline-flex;align-items:center;gap:var(--delta-indicator-gap, 4px);font-size:var(--delta-indicator-font-size, 13px);font-weight:var(--delta-indicator-font-weight, 600);line-height:1;}.delta-positive.svelte-1h4ulcy {color:var(--delta-indicator-positive-color, #007846);}.delta-negative.svelte-1h4ulcy {color:var(--delta-indicator-negative-color, light-dark(#c81e26, #f87171));}.delta-neutral.svelte-1h4ulcy {color:var(--delta-indicator-neutral-color, #646464);}\n\n  /* The tone color is set on the wrapper; the text span must inherit it explicitly.\n     A consumer's global `span { color }` rule (higher weight than inheritance) would\n     otherwise repaint just the number a neutral text color — leaving only the arrow\n     tinted and making up/down deltas read as colorless. */.delta-indicator-text.svelte-1h4ulcy {color:inherit;}.delta-indicator-arrow.svelte-1h4ulcy {display:inline-flex;width:var(--delta-indicator-arrow-size, 16px);height:var(--delta-indicator-arrow-size, 16px);flex-shrink:0;}.delta-indicator-dash.svelte-1h4ulcy {color:inherit;flex-shrink:0;}.delta-indicator-arrow.svelte-1h4ulcy svg:where(.svelte-1h4ulcy) {width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:var(--delta-indicator-arrow-stroke-width, 2);stroke-linecap:round;stroke-linejoin:round;}\n\n  /* Down-trend mirrors the up-trend glyph vertically (line falling to the\n     lower-right, arrowhead at the bottom-right) — the Untitled UI trend-down-01\n     shape. A 180deg rotation would instead point down-left. */.delta-arrow-down.svelte-1h4ulcy {transform:scaleY(-1);}"
 };
 function DeltaIndicator(e, t) {
 	push(t, !0), append_styles$1(e, $$css$75);
-	let n = prop(t, "value", 7), i = prop(t, "format", 7), a = prop(t, "invertColors", 7, !1), o = prop(t, "hideArrow", 7, !1), s = prop(t, "neutralThreshold", 7, 0), c = prop(t, "testId", 7), l = prop(t, "classes", 7), u = (e) => `${Math.round(Math.abs(e))}%`, f = /* @__PURE__ */ user_derived(() => Math.max(0, s())), p = /* @__PURE__ */ user_derived(() => n() > get(f) ? "up" : n() < -get(f) ? "down" : "neutral"), h = /* @__PURE__ */ user_derived(() => get(p) === "neutral" ? "neutral" : get(p) === "up" === a() ? "negative" : "positive"), S = /* @__PURE__ */ user_derived(() => (i() ?? u)(n()));
-	var C = {
+	let n = prop(t, "value", 7), i = prop(t, "format", 7), a = prop(t, "invertColors", 7, !1), o = prop(t, "hideArrow", 7, !1), s = prop(t, "neutralThreshold", 7, 0), c = prop(t, "animateValue", 7, !1), l = prop(t, "testId", 7), u = prop(t, "classes", 7), f = (e) => `${Math.round(Math.abs(e))}%`, p = /* @__PURE__ */ user_derived(() => Math.max(0, s())), h = /* @__PURE__ */ user_derived(() => n() > get(p) ? "up" : n() < -get(p) ? "down" : "neutral"), S = /* @__PURE__ */ user_derived(() => get(h) === "neutral" ? "neutral" : get(h) === "up" === a() ? "negative" : "positive"), C = /* @__PURE__ */ user_derived(() => (i() ?? f)(n()));
+	var k = {
 		get value() {
 			return n();
 		},
@@ -32523,31 +32969,46 @@ function DeltaIndicator(e, t) {
 		set neutralThreshold(e = 0) {
 			s(e), flushSync();
 		},
-		get testId() {
+		get animateValue() {
 			return c();
 		},
-		set testId(e) {
+		set animateValue(e = !1) {
 			c(e), flushSync();
 		},
-		get classes() {
+		get testId() {
 			return l();
 		},
-		set classes(e) {
+		set testId(e) {
 			l(e), flushSync();
+		},
+		get classes() {
+			return u();
+		},
+		set classes(e) {
+			u(e), flushSync();
 		}
-	}, k = root_2$26(), R = child(k), te = (e) => {
+	}, R = root_2$26(), te = child(R), ne = (e) => {
 		var t = root$36();
-		template_effect(() => set_class(t, 1, `delta-indicator-arrow delta-arrow-${get(p) ?? ""}`, "svelte-1h4ulcy")), append(e, t);
-	}, ne = (e) => {
+		template_effect(() => set_class(t, 1, `delta-indicator-arrow delta-arrow-${get(h) ?? ""}`, "svelte-1h4ulcy")), append(e, t);
+	}, re = (e) => {
 		append(e, root_1$35());
 	};
-	if_block(R, (e) => {
-		!o() && get(p) !== "neutral" ? e(te) : o() || e(ne, 1);
+	if_block(te, (e) => {
+		!o() && get(h) !== "neutral" ? e(ne) : o() || e(re, 1);
 	});
-	var re = sibling(R, 2), G = child(re, !0);
-	return reset(re), reset(k), template_effect(() => {
-		set_class(k, 1, `delta-indicator delta-${get(h) ?? ""} ${l() ?? "" ?? ""}`, "svelte-1h4ulcy"), set_attribute(k, "data-pw", typeof c() == "string" ? c() : null), set_attribute(k, "testid", typeof c() == "string" ? c() : null), set_text(G, get(S));
-	}), append(e, k), pop(C);
+	var G = sibling(te, 2), be = child(G), Me = (e) => {
+		AnimatedNumber(e, { get value() {
+			return get(C);
+		} });
+	}, Re = (e) => {
+		var t = text();
+		template_effect(() => set_text(t, get(C))), append(e, t);
+	};
+	return if_block(be, (e) => {
+		c() ? e(Me) : e(Re, -1);
+	}), reset(G), reset(R), template_effect(() => {
+		set_class(R, 1, `delta-indicator delta-${get(S) ?? ""} ${u() ?? "" ?? ""}`, "svelte-1h4ulcy"), set_attribute(R, "data-pw", typeof l() == "string" ? l() : null), set_attribute(R, "testid", typeof l() == "string" ? l() : null);
+	}), append(e, R), pop(k);
 }
 create_custom_element(DeltaIndicator, {
 	value: {},
@@ -32555,25 +33016,47 @@ create_custom_element(DeltaIndicator, {
 	invertColors: {},
 	hideArrow: {},
 	neutralThreshold: {},
+	animateValue: {},
 	testId: {},
 	classes: {}
 }, [], [], { mode: "open" });
 //#endregion
-//#region src/lib/StatCard/StatCard.svelte
-var root$35 = /* @__PURE__ */ from_html("<span class=\"statcard-title-tooltip-trigger svelte-pfmus\"><span class=\"statcard-title statcard-title-tooltip svelte-pfmus\"> </span> <span class=\"statcard-tooltip-icon svelte-pfmus\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" class=\"svelte-pfmus\"><circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.2\"></circle><rect x=\"7.25\" y=\"6.9\" width=\"1.5\" height=\"4.1\" rx=\"0.75\" fill=\"currentColor\"></rect><circle cx=\"8\" cy=\"4.8\" r=\"0.9\" fill=\"currentColor\"></circle></svg></span></span>"), root_1$34 = /* @__PURE__ */ from_html("<div class=\"statcard-title svelte-pfmus\"> </div>"), root_2$25 = /* @__PURE__ */ from_html("<div class=\"statcard-header-checkbox svelte-pfmus\"><!></div>"), root_3$24 = /* @__PURE__ */ from_html("<div class=\"statcard-header-right svelte-pfmus\"><!></div>"), root_4$21 = /* @__PURE__ */ from_html("<div class=\"statcard-header svelte-pfmus\"><div class=\"statcard-header-left svelte-pfmus\"><!> <!></div> <!></div>"), root_5$20 = /* @__PURE__ */ from_html("<div class=\"statcard-row-divider svelte-pfmus\"></div>"), root_6$19 = /* @__PURE__ */ from_html("<div class=\"statcard-row-heading statcard-row-heading-tooltip svelte-pfmus\"> </div>"), root_7$17 = /* @__PURE__ */ from_html("<div class=\"statcard-row-heading svelte-pfmus\"> </div>"), root_8$15 = /* @__PURE__ */ from_html("<div class=\"statcard-row-heading-wrap svelte-pfmus\"><!></div>"), root_9$12 = /* @__PURE__ */ from_html("<div class=\"statcard-comparison-value svelte-pfmus\"> </div>"), root_10$11 = /* @__PURE__ */ from_html("<div class=\"statcard-delta statcard-delta-na svelte-pfmus\">N/A</div>"), root_11$9 = /* @__PURE__ */ from_html("<div> </div>"), root_12$8 = /* @__PURE__ */ from_html("<div class=\"statcard-row-subtitle svelte-pfmus\"> </div>"), root_13$6 = /* @__PURE__ */ from_html("<div class=\"statcard-breakdown-heading svelte-pfmus\"> </div>"), root_14$5 = /* @__PURE__ */ from_html("<div class=\"statcard-breakdown-item svelte-pfmus\"><div class=\"statcard-breakdown-label svelte-pfmus\"> </div> <div class=\"statcard-breakdown-value-line svelte-pfmus\"><div class=\"statcard-breakdown-value svelte-pfmus\"> </div> <!></div></div>"), root_15$3 = /* @__PURE__ */ from_html("<!> <div class=\"statcard-breakdown-grid svelte-pfmus\"></div>", 1), root_16$2 = /* @__PURE__ */ from_html("<!> <div class=\"statcard-row svelte-pfmus\"><!> <div class=\"statcard-row-value-line svelte-pfmus\"><div> </div> <!> <!> <!></div> <!> <!></div>", 1), root_17$1 = /* @__PURE__ */ from_html("<div></div>"), root_18$1 = /* @__PURE__ */ from_html("<div class=\"statcard-value svelte-pfmus\"><!></div>"), root_19$1 = /* @__PURE__ */ from_html("<div class=\"statcard-value svelte-pfmus\"> </div>"), root_20$1 = /* @__PURE__ */ from_html("<div class=\"statcard-value-row svelte-pfmus\"><!> <!></div>"), root_21$1 = /* @__PURE__ */ from_html("<div class=\"statcard-subtitle svelte-pfmus\"> </div>"), root_22$1 = /* @__PURE__ */ from_html("<div class=\"statcard-children svelte-pfmus\"><!></div>"), root_23$1 = /* @__PURE__ */ from_html("<div class=\"statcard-footer svelte-pfmus\"><!></div>"), root_24$1 = /* @__PURE__ */ from_html("<div><!> <!> <!> <!> <!></div>"), $$css$74 = {
+//#region src/lib/StatCard/metric.ts
+var UNITS = new Set(/* @__PURE__ */ "k.l.m.b.t.cr.lac.lakh.mn.bn.s.ms.h.hr.hrs.d.day.days.min.mins.sec.secs.x.pt.pts.px".split(".")), DECORATION = /[\p{Nd}\s,.:+%()[\]]|\p{Sc}|\p{Pd}|\p{Sm}/gu, isAnimatableMetric = (e) => {
+	if (typeof e != "string") return !1;
+	let t = e.trim();
+	return t.length === 0 || !/\p{Nd}/u.test(t) || /\.[a-z]{2,}(?:\/|$)|@|\/\//i.test(t) || /\([^)]*\p{Nd}[^)]*\)/u.test(t) ? !1 : t.replace(DECORATION, " ").split(/\s+/).filter((e) => e.length > 0).every((e) => UNITS.has(e.toLowerCase()));
+}, root$35 = /* @__PURE__ */ from_html("<span class=\"statcard-title-tooltip-trigger svelte-pfmus\"><span class=\"statcard-title statcard-title-tooltip svelte-pfmus\"> </span> <span class=\"statcard-tooltip-icon svelte-pfmus\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" class=\"svelte-pfmus\"><circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" stroke-width=\"1.2\"></circle><rect x=\"7.25\" y=\"6.9\" width=\"1.5\" height=\"4.1\" rx=\"0.75\" fill=\"currentColor\"></rect><circle cx=\"8\" cy=\"4.8\" r=\"0.9\" fill=\"currentColor\"></circle></svg></span></span>"), root_1$34 = /* @__PURE__ */ from_html("<div class=\"statcard-title svelte-pfmus\"> </div>"), root_2$25 = /* @__PURE__ */ from_html("<div class=\"statcard-header-checkbox svelte-pfmus\"><!></div>"), root_3$24 = /* @__PURE__ */ from_html("<div class=\"statcard-header-right svelte-pfmus\"><!></div>"), root_4$21 = /* @__PURE__ */ from_html("<div class=\"statcard-header svelte-pfmus\"><div class=\"statcard-header-left svelte-pfmus\"><!> <!></div> <!></div>"), root_5$20 = /* @__PURE__ */ from_html("<div class=\"statcard-row-divider svelte-pfmus\"></div>"), root_6$19 = /* @__PURE__ */ from_html("<div class=\"statcard-row-heading statcard-row-heading-tooltip svelte-pfmus\"> </div>"), root_7$17 = /* @__PURE__ */ from_html("<div class=\"statcard-row-heading svelte-pfmus\"> </div>"), root_8$15 = /* @__PURE__ */ from_html("<div class=\"statcard-row-heading-wrap svelte-pfmus\"><!></div>"), root_9$12 = /* @__PURE__ */ from_html("<div class=\"statcard-comparison-value svelte-pfmus\">/ <!></div>"), root_10$11 = /* @__PURE__ */ from_html("<div class=\"statcard-delta statcard-delta-na svelte-pfmus\">N/A</div>"), root_11$9 = /* @__PURE__ */ from_html("<div> </div>"), root_12$8 = /* @__PURE__ */ from_html("<div class=\"statcard-row-subtitle svelte-pfmus\"> </div>"), root_13$6 = /* @__PURE__ */ from_html("<div class=\"statcard-breakdown-heading svelte-pfmus\"> </div>"), root_14$5 = /* @__PURE__ */ from_html("<div class=\"statcard-breakdown-item svelte-pfmus\"><div class=\"statcard-breakdown-label svelte-pfmus\"> </div> <div class=\"statcard-breakdown-value-line svelte-pfmus\"><div class=\"statcard-breakdown-value svelte-pfmus\"><!></div> <!></div></div>"), root_15$3 = /* @__PURE__ */ from_html("<!> <div class=\"statcard-breakdown-grid svelte-pfmus\"></div>", 1), root_16$2 = /* @__PURE__ */ from_html("<!> <div class=\"statcard-row svelte-pfmus\"><!> <div class=\"statcard-row-value-line svelte-pfmus\"><div><!></div> <!> <!> <!></div> <!> <!></div>", 1), root_17$2 = /* @__PURE__ */ from_html("<div></div>"), root_18$1 = /* @__PURE__ */ from_html("<div class=\"statcard-value svelte-pfmus\"><!></div>"), root_19$1 = /* @__PURE__ */ from_html("<div class=\"statcard-value svelte-pfmus\" data-sc-slot=\"value\"><!></div>"), root_20$1 = /* @__PURE__ */ from_html("<div class=\"statcard-value-row svelte-pfmus\"><!> <!></div>"), root_21$1 = /* @__PURE__ */ from_html("<div class=\"statcard-subtitle svelte-pfmus\" data-sc-slot=\"subtitle\"><!></div>"), root_22$1 = /* @__PURE__ */ from_html("<div class=\"statcard-children svelte-pfmus\"><!></div>"), root_23$1 = /* @__PURE__ */ from_html("<div class=\"statcard-footer svelte-pfmus\"><!></div>"), root_24$1 = /* @__PURE__ */ from_html("<div><!> <!> <!> <!> <!></div>"), $$css$74 = {
 	hash: "svelte-pfmus",
 	code: ".statcard.svelte-pfmus {display:flex;flex-direction:column;gap:var(--statcard-gap, 4px);padding:var(--statcard-padding, 16px);background:var(--statcard-background, #ffffff);border:var(--statcard-border, 1px solid #e5e7eb);border-radius:var(--statcard-border-radius, var(--radius, 4px));box-shadow:var(--statcard-box-shadow, none);width:var(--statcard-width, auto);min-width:var(--statcard-min-width, 0);max-width:var(--statcard-max-width, none);height:var(--statcard-height, auto);color:var(--statcard-color, inherit);cursor:var(--statcard-cursor, default);box-sizing:border-box;}.statcard-interactive.svelte-pfmus {cursor:var(--statcard-cursor, pointer);}.statcard-interactive.svelte-pfmus:focus-visible {outline:var(--statcard-focus-outline, 2px solid currentColor);outline-offset:var(--statcard-focus-outline-offset, 2px);}.statcard-header.svelte-pfmus {order:var(--statcard-header-order, 0);display:flex;align-items:center;justify-content:space-between;gap:var(--statcard-header-gap, 8px);}.statcard-header-left.svelte-pfmus {display:flex;align-items:center;gap:var(--statcard-header-left-gap, 8px);flex:1;min-width:0;}.statcard-header-right.svelte-pfmus {display:flex;align-items:center;flex-shrink:0;}\n\n  /* Wrapper keeps the checkbox in the event path (to stop bubbling to the card\n     action). `margin-left: auto` pushes it to the header's right edge so the title\n     stays left and the checkbox reads as a right-aligned control. (A previous\n     `display: contents` here removed the box, which silently defeated the flex\n     alignment.) */.statcard-header-checkbox.svelte-pfmus {display:flex;align-items:center;margin-left:auto;}.statcard-title.svelte-pfmus {font-size:var(--statcard-title-font-size, 12px);font-weight:var(--statcard-title-font-weight, 500);color:var(--statcard-title-color, #6b7280);line-height:var(--statcard-title-line-height, 1.4);white-space:var(--statcard-title-white-space, nowrap);overflow:hidden;text-overflow:ellipsis;}.statcard-title-tooltip-trigger.svelte-pfmus {display:inline-flex;align-items:center;gap:var(--statcard-tooltip-icon-gap, 4px);min-width:0;}.statcard-title-tooltip.svelte-pfmus {cursor:default;\n    /* Default surface (Euler) uses the ⓘ icon as the tooltip affordance, so the\n       title carries no underline. The Shopify theme flips both tokens — dotted\n       underline on, icon off — via its own stylesheet. */text-decoration:var(--statcard-title-tooltip-decoration, none);text-underline-offset:2px;}.statcard-tooltip-icon.svelte-pfmus {display:var(--statcard-tooltip-icon-display, inline-flex);align-items:center;justify-content:center;width:var(--statcard-tooltip-icon-size, 14px);height:var(--statcard-tooltip-icon-size, 14px);flex-shrink:0;color:var(--statcard-tooltip-icon-color, currentColor);cursor:default;}.statcard-tooltip-icon.svelte-pfmus svg:where(.svelte-pfmus) {width:100%;height:100%;}.statcard-value-row.svelte-pfmus {order:var(--statcard-value-row-order, 0);display:flex;align-items:var(--statcard-value-row-align, baseline);gap:var(--statcard-value-row-gap, 8px);flex-wrap:wrap;}.statcard-value.svelte-pfmus {font-size:var(--statcard-value-font-size, 24px);font-weight:var(--statcard-value-font-weight, 600);color:var(--statcard-value-color, inherit);line-height:var(--statcard-value-line-height, 1.2);}.statcard-value-success.svelte-pfmus {color:var(--statcard-value-success-color, #16a34a);}.statcard-value-warning.svelte-pfmus {color:var(--statcard-value-warning-color, #b45309);}\n\n  /* Per-row value typography override — falls back to the card-level value\n     tokens so an unset row matches today's shared appearance exactly, then to\n     the same literals as the last resort. Scoped to the row's value line so\n     the single (non-rows) card value is unaffected. Mirrors the fallback\n     shape of --statcard-row-subtitle-font-size below. */.statcard-row-value-line.svelte-pfmus .statcard-value:where(.svelte-pfmus) {font-size:var(--statcard-row-value-font-size, var(--statcard-value-font-size, 24px));font-weight:var(--statcard-row-value-font-weight, var(--statcard-value-font-weight, 600));}.statcard-delta.svelte-pfmus {font-size:var(--statcard-delta-font-size, 13px);font-weight:var(--statcard-delta-font-weight, 500);color:var(--statcard-delta-color, #6b7280);line-height:var(--statcard-delta-line-height, 1.4);}.statcard-delta-positive.svelte-pfmus {color:var(--statcard-delta-positive-color, #166534);}.statcard-delta-negative.svelte-pfmus {color:var(--statcard-delta-negative-color, #dc2626);}.statcard-delta-na.svelte-pfmus {color:var(--statcard-delta-na-color, var(--statcard-delta-color, #6b7280));}\n\n  /* Inline comparison denominator (\"₹60k / ₹10L\") — a muted, slightly smaller\n     companion to the metric value, baseline-aligned by the value row. */.statcard-comparison-value.svelte-pfmus {font-size:var(--statcard-comparison-font-size, 16px);font-weight:var(--statcard-comparison-font-weight, 700);color:var(--statcard-comparison-color, #c7c7c7);line-height:var(--statcard-comparison-line-height, 1.4);white-space:nowrap;}.statcard-subtitle.svelte-pfmus {order:var(--statcard-subtitle-order, 0);font-size:var(--statcard-subtitle-font-size, 12px);font-weight:var(--statcard-subtitle-font-weight, 400);color:var(--statcard-subtitle-color, #4b5563);line-height:var(--statcard-subtitle-line-height, 1.4);}\n\n  /* Per-row subtitle — falls back to the card-level subtitle tokens so a\n     consumer that already themes `.statcard-subtitle` gets a matching look\n     with no extra wiring, then to the same literals as the last resort. */.statcard-row-subtitle.svelte-pfmus {order:var(--statcard-row-subtitle-order, 0);font-size:var(--statcard-row-subtitle-font-size, var(--statcard-subtitle-font-size, 12px));font-weight:var(\n      --statcard-row-subtitle-font-weight,\n      var(--statcard-subtitle-font-weight, 400)\n    );color:var(--statcard-row-subtitle-color, var(--statcard-subtitle-color, #4b5563));line-height:var(\n      --statcard-row-subtitle-line-height,\n      var(--statcard-subtitle-line-height, 1.4)\n    );}\n\n  /* Multi-row layout */.statcard-rows.svelte-pfmus {order:var(--statcard-rows-order, 0);display:flex;flex-direction:column;gap:var(--statcard-rows-gap, 0px);}.statcard-row-divider.svelte-pfmus {height:var(--statcard-row-divider-height, 1px);background:var(--statcard-row-divider-color, #e5e7eb);margin:var(--statcard-row-divider-margin, 8px 0);}\n\n  /* Horizontal layout: lay the metric sections side by side with vertical\n     dividers. Each section flexes to share the available width equally. */.statcard-rows-horizontal.svelte-pfmus {flex-direction:row;}.statcard-rows-horizontal.svelte-pfmus .statcard-row:where(.svelte-pfmus) {flex:1;min-width:0;}.statcard-rows-horizontal.svelte-pfmus .statcard-row-divider:where(.svelte-pfmus) {align-self:stretch;flex-shrink:0;width:var(--statcard-row-divider-height, 1px);height:auto;margin:var(--statcard-row-divider-margin-horizontal, 0 16px);}.statcard-row.svelte-pfmus {display:flex;flex-direction:column;gap:var(--statcard-row-gap, 4px);}.statcard-row-heading-wrap.svelte-pfmus {order:var(--statcard-row-heading-order, 0);display:flex;align-items:center;}.statcard-row-heading.svelte-pfmus {font-size:var(--statcard-row-heading-font-size, 12px);font-weight:var(--statcard-row-heading-font-weight, 500);color:var(--statcard-row-heading-color, #6b7280);line-height:var(--statcard-row-heading-line-height, 1.4);}.statcard-row-heading-tooltip.svelte-pfmus {cursor:default;text-decoration:underline dotted;text-underline-offset:2px;}.statcard-row-value-line.svelte-pfmus {order:var(--statcard-row-value-line-order, 0);display:flex;align-items:baseline;gap:var(--statcard-row-value-gap, 8px);flex-wrap:wrap;}.statcard-row-additional.svelte-pfmus {\n    /* Default: flows inline in the wrapping flex row and only breaks if it\n       does not fit — matches short unit suffixes like \"%\" or \"ms\". */font-size:var(--statcard-row-additional-font-size, 12px);font-weight:var(--statcard-row-additional-font-weight, 400);color:var(--statcard-row-additional-color, #4b5563);line-height:1.4;}.statcard-row-additional-break.svelte-pfmus {\n    /* Opt-in: forces its own line regardless of available width, for\n       descriptive text that should never sit beside the value/delta. */flex-basis:var(--statcard-row-additional-flex-basis, 100%);}\n\n  /* Breakdown grid */.statcard-breakdown-heading.svelte-pfmus {font-size:var(--statcard-breakdown-heading-font-size, 11px);font-weight:var(--statcard-breakdown-heading-font-weight, 600);color:var(--statcard-breakdown-heading-color, #6b7280);letter-spacing:0.04em;text-transform:var(--statcard-breakdown-heading-text-transform, uppercase);margin-top:var(--statcard-breakdown-heading-margin-top, 6px);}.statcard-breakdown-grid.svelte-pfmus {display:grid;grid-template-columns:repeat(auto-fill, minmax(var(--statcard-breakdown-col-min, 100px), 1fr));gap:var(--statcard-breakdown-gap, 8px);margin-top:var(--statcard-breakdown-margin-top, 4px);}.statcard-breakdown-item.svelte-pfmus {display:flex;flex-direction:var(--statcard-breakdown-item-flex-direction, column);align-items:var(--statcard-breakdown-item-align-items, stretch);flex-wrap:var(--statcard-breakdown-item-flex-wrap, nowrap);gap:var(--statcard-breakdown-item-gap, 2px);}\n\n  /* The metric value and its change indicator share one line (label sits above\n     as the caption). Previously the delta was a third stacked child, so it\n     rendered on its own line beneath the number. */.statcard-breakdown-value-line.svelte-pfmus {order:var(--statcard-breakdown-value-line-order, 0);display:flex;align-items:baseline;gap:var(--statcard-breakdown-value-gap, 6px);flex-wrap:wrap;}.statcard-breakdown-label.svelte-pfmus {font-size:var(--statcard-breakdown-label-font-size, 11px);font-weight:var(--statcard-breakdown-label-font-weight, 400);color:var(--statcard-breakdown-label-color, #4b5563);line-height:1.4;}.statcard-breakdown-value.svelte-pfmus {font-size:var(--statcard-breakdown-value-font-size, 14px);font-weight:var(--statcard-breakdown-value-font-weight, 600);color:var(--statcard-breakdown-value-color, inherit);line-height:1.2;}.statcard-children.svelte-pfmus {margin-top:var(--statcard-children-margin-top, 4px);}.statcard-footer.svelte-pfmus {margin-top:var(--statcard-footer-margin-top, 8px);padding-top:var(--statcard-footer-padding-top, 8px);border-top:var(--statcard-footer-border-top, 1px solid #e5e7eb);}"
 };
 function StatCard(e, t) {
 	push(t, !0), append_styles$1(e, $$css$74);
-	let n = prop(t, "title", 7), i = prop(t, "value", 7), a = prop(t, "delta", 7), o = prop(t, "deltaPositive", 7), s = prop(t, "subtitle", 7), c = prop(t, "footer", 7), l = prop(t, "valueSnippet", 7), u = prop(t, "rows", 7), f = prop(t, "rowsDirection", 7, "column"), p = prop(t, "tooltip", 7), h = prop(t, "checkbox", 7), S = prop(t, "headerRight", 7), C = prop(t, "children", 7), k = prop(t, "testId", 7), R = prop(t, "classes", 7), te = prop(t, "onclick", 7), ne = prop(t, "oncheckboxchange", 7), re = /* @__PURE__ */ user_derived(() => typeof te() == "function"), G = /* @__PURE__ */ user_derived(() => typeof o() == "boolean" ? o() : typeof a() == "string" && a().trim().length > 0 ? a().trimStart().startsWith("+") ? !0 : a().trimStart().startsWith("-") ? !1 : null : null), be = /* @__PURE__ */ user_derived(() => typeof a() == "string" && a().trim().length > 0), Me = /* @__PURE__ */ user_derived(() => Array.isArray(u()) && u().length > 0), Re = /* @__PURE__ */ user_derived(() => typeof n() == "string" && n().length > 0), Ue = /* @__PURE__ */ user_derived(() => get(Re) || !!h() || typeof S() == "function"), it = (e) => {
+	let n = prop(t, "title", 7), i = prop(t, "value", 7), a = prop(t, "delta", 7), o = prop(t, "deltaPositive", 7), s = prop(t, "subtitle", 7), c = prop(t, "footer", 7), l = prop(t, "valueSnippet", 7), u = prop(t, "animateValue", 7, !1), f = prop(t, "animatePrimary", 7, !1), p = prop(t, "primary", 7, "auto"), h = prop(t, "animateOnMount", 7, !1), S = prop(t, "rows", 7), C = prop(t, "rowsDirection", 7, "column"), k = prop(t, "tooltip", 7), R = prop(t, "checkbox", 7), te = prop(t, "headerRight", 7), ne = prop(t, "children", 7), re = prop(t, "testId", 7), G = prop(t, "classes", 7), be = prop(t, "onclick", 7), Me = prop(t, "oncheckboxchange", 7), Re = /* @__PURE__ */ user_derived(() => typeof be() == "function"), Ue = /* @__PURE__ */ state(null), it = /* @__PURE__ */ user_derived(() => JSON.stringify([
+		i(),
+		s(),
+		(S() ?? []).map((e) => [
+			e.value,
+			e.comparisonValue,
+			(e.breakdown ?? []).map((e) => e.value)
+		])
+	])), at = (e) => (e) => {
+		if (!f() || p() !== "auto") return;
+		let t = null, n = -1;
+		for (let i of e.querySelectorAll("[data-sc-slot]")) {
+			if (!(i instanceof HTMLElement) || !isAnimatableMetric(i.textContent ?? "")) continue;
+			let e = Number.parseFloat(getComputedStyle(i).fontSize);
+			Number.isFinite(e) && e > n && (n = e, t = i.dataset.scSlot ?? null);
+		}
+		set(Ue, t, !0);
+	}, ot = (e) => typeof e == "number" || /^\d+$/.test(String(e)) ? `row-${e}` : String(e), ct = /* @__PURE__ */ user_derived(() => p() === "auto" ? get(Ue) : ot(p())), lt = (e, t) => typeof t != "string" || !isAnimatableMetric(t) ? !1 : f() ? e === get(ct) : u(), ut = /* @__PURE__ */ user_derived(() => typeof o() == "boolean" ? o() : typeof a() == "string" && a().trim().length > 0 ? a().trimStart().startsWith("+") ? !0 : a().trimStart().startsWith("-") ? !1 : null : null), dt = /* @__PURE__ */ user_derived(() => typeof a() == "string" && a().trim().length > 0), ft = /* @__PURE__ */ user_derived(() => Array.isArray(S()) && S().length > 0), pt = /* @__PURE__ */ user_derived(() => typeof n() == "string" && n().length > 0), mt = /* @__PURE__ */ user_derived(() => get(pt) || !!R() || typeof te() == "function"), ht = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.key === " " && e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
-	}, at = (e) => {
-		ne()?.(e);
-	}, ot = (e) => {
+	}, gt = (e) => {
+		Me()?.(e);
+	}, _t = (e) => {
 		e.stopPropagation();
 	};
-	var ct = {
+	var vt = {
 		get title() {
 			return n();
 		},
@@ -32616,82 +33099,106 @@ function StatCard(e, t) {
 		set valueSnippet(e) {
 			l(e), flushSync();
 		},
-		get rows() {
+		get animateValue() {
 			return u();
 		},
-		set rows(e) {
+		set animateValue(e = !1) {
 			u(e), flushSync();
 		},
-		get rowsDirection() {
+		get animatePrimary() {
 			return f();
 		},
-		set rowsDirection(e = "column") {
+		set animatePrimary(e = !1) {
 			f(e), flushSync();
 		},
-		get tooltip() {
+		get primary() {
 			return p();
 		},
-		set tooltip(e) {
+		set primary(e = "auto") {
 			p(e), flushSync();
 		},
-		get checkbox() {
+		get animateOnMount() {
 			return h();
 		},
-		set checkbox(e) {
+		set animateOnMount(e = !1) {
 			h(e), flushSync();
 		},
-		get headerRight() {
+		get rows() {
 			return S();
 		},
-		set headerRight(e) {
+		set rows(e) {
 			S(e), flushSync();
 		},
-		get children() {
+		get rowsDirection() {
 			return C();
 		},
-		set children(e) {
+		set rowsDirection(e = "column") {
 			C(e), flushSync();
 		},
-		get testId() {
+		get tooltip() {
 			return k();
 		},
-		set testId(e) {
+		set tooltip(e) {
 			k(e), flushSync();
 		},
-		get classes() {
+		get checkbox() {
 			return R();
 		},
-		set classes(e) {
+		set checkbox(e) {
 			R(e), flushSync();
 		},
-		get onclick() {
+		get headerRight() {
 			return te();
 		},
-		set onclick(e) {
+		set headerRight(e) {
 			te(e), flushSync();
 		},
-		get oncheckboxchange() {
+		get children() {
 			return ne();
 		},
-		set oncheckboxchange(e) {
+		set children(e) {
 			ne(e), flushSync();
+		},
+		get testId() {
+			return re();
+		},
+		set testId(e) {
+			re(e), flushSync();
+		},
+		get classes() {
+			return G();
+		},
+		set classes(e) {
+			G(e), flushSync();
+		},
+		get onclick() {
+			return be();
+		},
+		set onclick(e) {
+			be(e), flushSync();
+		},
+		get oncheckboxchange() {
+			return Me();
+		},
+		set oncheckboxchange(e) {
+			Me(e), flushSync();
 		}
-	}, lt = root_24$1();
-	let ut;
-	var dt = child(lt), ft = (e) => {
+	}, yt = root_24$1();
+	let bt;
+	var xt = child(yt), St = (e) => {
 		var t = root_4$21(), i = child(t), a = child(i), o = (e) => {
 			var t = comment(), i = first_child(t), a = (e) => {
 				{
-					let t = /* @__PURE__ */ user_derived(() => p().position ?? "top");
+					let t = /* @__PURE__ */ user_derived(() => k().position ?? "top");
 					Tooltip(e, {
 						get text() {
-							return p().text;
+							return k().text;
 						},
 						get position() {
 							return get(t);
 						},
 						get testId() {
-							return p().testId;
+							return k().testId;
 						},
 						children: (e, t) => {
 							var i = root$35(), a = child(i), o = child(a, !0);
@@ -32703,56 +33210,56 @@ function StatCard(e, t) {
 			}, o = (e) => {
 				var t = root_1$34(), i = child(t, !0);
 				reset(t), template_effect(() => {
-					set_attribute(t, "data-pw", typeof k() == "string" ? `${k()}-title` : null), set_attribute(t, "testid", typeof k() == "string" ? `${k()}-title` : null), set_text(i, n());
+					set_attribute(t, "data-pw", typeof re() == "string" ? `${re()}-title` : null), set_attribute(t, "testid", typeof re() == "string" ? `${re()}-title` : null), set_text(i, n());
 				}), append(e, t);
 			};
 			if_block(i, (e) => {
-				p() ? e(a) : e(o, -1);
+				k() ? e(a) : e(o, -1);
 			}), append(e, t);
 		};
 		if_block(a, (e) => {
-			get(Re) && e(o);
+			get(pt) && e(o);
 		});
 		var s = sibling(a, 2), c = (e) => {
 			var t = root_2$25(), n = child(t);
 			{
-				let e = /* @__PURE__ */ user_derived(() => h().checked ?? !1);
+				let e = /* @__PURE__ */ user_derived(() => R().checked ?? !1);
 				CheckListItem(n, {
 					get text() {
-						return h().text;
+						return R().text;
 					},
 					get checked() {
 						return get(e);
 					},
-					onclick: at
+					onclick: gt
 				});
 			}
-			reset(t), delegated("click", t, ot), delegated("keydown", t, ot), append(e, t);
+			reset(t), delegated("click", t, _t), delegated("keydown", t, _t), append(e, t);
 		};
 		if_block(s, (e) => {
-			h() && e(c);
+			R() && e(c);
 		}), reset(i);
 		var l = sibling(i, 2), u = (e) => {
 			var t = root_3$24();
-			snippet(child(t), S), reset(t), append(e, t);
+			snippet(child(t), te), reset(t), append(e, t);
 		};
 		if_block(l, (e) => {
-			S() && e(u);
+			te() && e(u);
 		}), reset(t), template_effect(() => {
-			set_attribute(t, "data-pw", typeof k() == "string" ? `${k()}-header` : null), set_attribute(t, "testid", typeof k() == "string" ? `${k()}-header` : null);
+			set_attribute(t, "data-pw", typeof re() == "string" ? `${re()}-header` : null), set_attribute(t, "testid", typeof re() == "string" ? `${re()}-header` : null);
 		}), append(e, t);
 	};
-	if_block(dt, (e) => {
-		get(Ue) && e(ft);
+	if_block(xt, (e) => {
+		get(mt) && e(St);
 	});
-	var pt = sibling(dt, 2), mt = (e) => {
-		var t = root_17$1();
+	var Ct = sibling(xt, 2), wt = (e) => {
+		var t = root_17$2();
 		let n;
-		each(t, 21, u, index, (e, t, n) => {
+		each(t, 21, S, index, (e, t, n) => {
 			var i = root_16$2(), a = first_child(i), o = (e) => {
 				var t = root_5$20();
 				template_effect(() => {
-					set_attribute(t, "data-pw", typeof k() == "string" ? `${k()}-row-divider-${n}` : null), set_attribute(t, "testid", typeof k() == "string" ? `${k()}-row-divider-${n}` : null);
+					set_attribute(t, "data-pw", typeof re() == "string" ? `${re()}-row-divider-${n}` : null), set_attribute(t, "testid", typeof re() == "string" ? `${re()}-row-divider-${n}` : null);
 				}), append(e, t);
 			};
 			if_block(a, (e) => {
@@ -32792,20 +33299,49 @@ function StatCard(e, t) {
 			});
 			var u = sibling(c, 2), f = child(u);
 			let p;
-			var h = child(f, !0);
-			reset(f);
-			var S = sibling(f, 2), C = (e) => {
-				var i = root_9$12(), a = child(i);
-				reset(i), template_effect(() => {
-					set_attribute(i, "data-pw", typeof k() == "string" ? `${k()}-comparison-${n}` : null), set_attribute(i, "testid", typeof k() == "string" ? `${k()}-comparison-${n}` : null), set_text(a, `/ ${get(t).comparisonValue ?? ""}`);
-				}), append(e, i);
+			set_attribute(f, "data-sc-slot", `row-${n}`);
+			var S = child(f), C = (e) => {
+				AnimatedNumber(e, {
+					get value() {
+						return get(t).value;
+					},
+					get animateOnMount() {
+						return h();
+					}
+				});
+			}, k = /* @__PURE__ */ user_derived(() => lt(`row-${n}`, get(t).value)), R = (e) => {
+				var n = text();
+				template_effect(() => set_text(n, get(t).value)), append(e, n);
 			};
 			if_block(S, (e) => {
-				typeof get(t).comparisonValue == "string" && get(t).comparisonValue.length > 0 && e(C);
+				get(k) ? e(C) : e(R, -1);
+			}), reset(f);
+			var te = sibling(f, 2), ne = (e) => {
+				var i = root_9$12(), a = sibling(child(i)), o = (e) => {
+					AnimatedNumber(e, {
+						get animateOnMount() {
+							return h();
+						},
+						get value() {
+							return get(t).comparisonValue;
+						}
+					});
+				}, s = /* @__PURE__ */ user_derived(() => lt(`row-${n}-comparison`, get(t).comparisonValue)), c = (e) => {
+					var n = text();
+					template_effect(() => set_text(n, get(t).comparisonValue)), append(e, n);
+				};
+				if_block(a, (e) => {
+					get(s) ? e(o) : e(c, -1);
+				}), reset(i), template_effect(() => {
+					set_attribute(i, "data-pw", typeof re() == "string" ? `${re()}-comparison-${n}` : null), set_attribute(i, "testid", typeof re() == "string" ? `${re()}-comparison-${n}` : null);
+				}), append(e, i);
+			};
+			if_block(te, (e) => {
+				typeof get(t).comparisonValue == "string" && get(t).comparisonValue.length > 0 && e(ne);
 			});
-			var R = sibling(S, 2), te = (e) => {
+			var G = sibling(te, 2), be = (e) => {
 				{
-					let i = /* @__PURE__ */ user_derived(() => get(t).invertChangeColors ?? !1), a = /* @__PURE__ */ user_derived(() => k() ? `${k()}-delta-${n}` : null);
+					let i = /* @__PURE__ */ user_derived(() => get(t).invertChangeColors ?? !1), a = /* @__PURE__ */ user_derived(() => re() ? `${re()}-delta-${n}` : null);
 					DeltaIndicator(e, {
 						get value() {
 							return get(t).change;
@@ -32818,36 +33354,36 @@ function StatCard(e, t) {
 						}
 					});
 				}
-			}, ne = (e) => {
+			}, Me = (e) => {
 				var t = root_10$11();
 				template_effect(() => {
-					set_attribute(t, "data-pw", typeof k() == "string" ? `${k()}-delta-na-${n}` : null), set_attribute(t, "testid", typeof k() == "string" ? `${k()}-delta-na-${n}` : null);
+					set_attribute(t, "data-pw", typeof re() == "string" ? `${re()}-delta-na-${n}` : null), set_attribute(t, "testid", typeof re() == "string" ? `${re()}-delta-na-${n}` : null);
 				}), append(e, t);
 			};
-			if_block(R, (e) => {
-				typeof get(t).change == "number" ? e(te) : get(t).change === null && e(ne, 1);
+			if_block(G, (e) => {
+				typeof get(t).change == "number" ? e(be) : get(t).change === null && e(Me, 1);
 			});
-			var re = sibling(R, 2), G = (e) => {
+			var Re = sibling(G, 2), Ue = (e) => {
 				var i = root_11$9();
 				let a;
 				var o = child(i, !0);
 				reset(i), template_effect(() => {
-					a = set_class(i, 1, "statcard-row-additional svelte-pfmus", null, a, { "statcard-row-additional-break": get(t).additionalContentBreak === !0 }), set_attribute(i, "data-pw", typeof k() == "string" ? `${k()}-additional-${n}` : null), set_attribute(i, "testid", typeof k() == "string" ? `${k()}-additional-${n}` : null), set_text(o, get(t).additionalContent);
+					a = set_class(i, 1, "statcard-row-additional svelte-pfmus", null, a, { "statcard-row-additional-break": get(t).additionalContentBreak === !0 }), set_attribute(i, "data-pw", typeof re() == "string" ? `${re()}-additional-${n}` : null), set_attribute(i, "testid", typeof re() == "string" ? `${re()}-additional-${n}` : null), set_text(o, get(t).additionalContent);
 				}), append(e, i);
 			};
-			if_block(re, (e) => {
-				typeof get(t).additionalContent == "string" && get(t).additionalContent.length > 0 && e(G);
+			if_block(Re, (e) => {
+				typeof get(t).additionalContent == "string" && get(t).additionalContent.length > 0 && e(Ue);
 			}), reset(u);
-			var be = sibling(u, 2), Me = (e) => {
+			var it = sibling(u, 2), at = (e) => {
 				var i = root_12$8(), a = child(i, !0);
 				reset(i), template_effect(() => {
-					set_attribute(i, "data-pw", typeof k() == "string" ? `${k()}-subtitle-${n}` : null), set_attribute(i, "testid", typeof k() == "string" ? `${k()}-subtitle-${n}` : null), set_text(a, get(t).subtitle);
+					set_attribute(i, "data-pw", typeof re() == "string" ? `${re()}-subtitle-${n}` : null), set_attribute(i, "testid", typeof re() == "string" ? `${re()}-subtitle-${n}` : null), set_text(a, get(t).subtitle);
 				}), append(e, i);
 			};
-			if_block(be, (e) => {
-				typeof get(t).subtitle == "string" && get(t).subtitle.length > 0 && e(Me);
+			if_block(it, (e) => {
+				typeof get(t).subtitle == "string" && get(t).subtitle.length > 0 && e(at);
 			});
-			var Re = sibling(be, 2), Ue = (e) => {
+			var ot = sibling(it, 2), ct = (e) => {
 				var i = root_15$3(), a = first_child(i), o = (e) => {
 					var n = root_13$6(), i = child(n, !0);
 					reset(n), template_effect(() => set_text(i, get(t).breakdownHeading)), append(e, n);
@@ -32859,9 +33395,23 @@ function StatCard(e, t) {
 				each(s, 21, () => get(t).breakdown, index, (e, t, i) => {
 					var a = root_14$5(), o = child(a), s = child(o, !0);
 					reset(o);
-					var c = sibling(o, 2), l = child(c), u = child(l, !0);
-					reset(l);
-					var f = sibling(l, 2), p = (e) => {
+					var c = sibling(o, 2), l = child(c), u = child(l), f = (e) => {
+						AnimatedNumber(e, {
+							get value() {
+								return get(t).value;
+							},
+							get animateOnMount() {
+								return h();
+							}
+						});
+					}, p = /* @__PURE__ */ user_derived(() => lt(`breakdown-${n}-${i}`, get(t).value)), S = (e) => {
+						var n = text();
+						template_effect(() => set_text(n, get(t).value)), append(e, n);
+					};
+					if_block(u, (e) => {
+						get(p) ? e(f) : e(S, -1);
+					}), reset(l);
+					var C = sibling(l, 2), k = (e) => {
 						{
 							let n = /* @__PURE__ */ user_derived(() => get(t).invertChangeColors ?? !1);
 							DeltaIndicator(e, {
@@ -32874,34 +33424,48 @@ function StatCard(e, t) {
 							});
 						}
 					};
-					if_block(f, (e) => {
-						typeof get(t).change == "number" && e(p);
+					if_block(C, (e) => {
+						typeof get(t).change == "number" && e(k);
 					}), reset(c), reset(a), template_effect(() => {
-						set_attribute(a, "data-pw", typeof k() == "string" ? `${k()}-breakdown-item-${n}-${i}` : null), set_attribute(a, "testid", typeof k() == "string" ? `${k()}-breakdown-item-${n}-${i}` : null), set_text(s, get(t).label), set_text(u, get(t).value);
+						set_attribute(a, "data-pw", typeof re() == "string" ? `${re()}-breakdown-item-${n}-${i}` : null), set_attribute(a, "testid", typeof re() == "string" ? `${re()}-breakdown-item-${n}-${i}` : null), set_text(s, get(t).label);
 					}), append(e, a);
 				}), reset(s), append(e, i);
-			}, it = /* @__PURE__ */ user_derived(() => Array.isArray(get(t).breakdown) && get(t).breakdown.length > 0);
-			if_block(Re, (e) => {
-				get(it) && e(Ue);
+			}, ut = /* @__PURE__ */ user_derived(() => Array.isArray(get(t).breakdown) && get(t).breakdown.length > 0);
+			if_block(ot, (e) => {
+				get(ut) && e(ct);
 			}), reset(s), template_effect(() => {
 				set_attribute(s, "data-pw", typeof get(t).testId == "string" ? get(t).testId : null), set_attribute(s, "testid", typeof get(t).testId == "string" ? get(t).testId : null), p = set_class(f, 1, "statcard-value svelte-pfmus", null, p, {
 					"statcard-value-success": get(t).valueVariant === "success",
 					"statcard-value-warning": get(t).valueVariant === "warning"
-				}), set_attribute(f, "data-pw", typeof k() == "string" ? `${k()}-value-${n}` : null), set_attribute(f, "testid", typeof k() == "string" ? `${k()}-value-${n}` : null), set_text(h, get(t).value);
+				}), set_attribute(f, "data-pw", typeof re() == "string" ? `${re()}-value-${n}` : null), set_attribute(f, "testid", typeof re() == "string" ? `${re()}-value-${n}` : null);
 			}), append(e, i);
 		}), reset(t), template_effect(() => {
-			n = set_class(t, 1, "statcard-rows svelte-pfmus", null, n, { "statcard-rows-horizontal": f() === "row" }), set_attribute(t, "data-pw", typeof k() == "string" ? `${k()}-rows` : null), set_attribute(t, "testid", typeof k() == "string" ? `${k()}-rows` : null);
+			n = set_class(t, 1, "statcard-rows svelte-pfmus", null, n, { "statcard-rows-horizontal": C() === "row" }), set_attribute(t, "data-pw", typeof re() == "string" ? `${re()}-rows` : null), set_attribute(t, "testid", typeof re() == "string" ? `${re()}-rows` : null);
 		}), append(e, t);
-	}, ht = (e) => {
+	}, Tt = (e) => {
 		var t = root_20$1(), n = child(t), o = (e) => {
 			var t = root_18$1();
 			snippet(child(t), l), reset(t), template_effect(() => {
-				set_attribute(t, "data-pw", typeof k() == "string" ? `${k()}-value` : null), set_attribute(t, "testid", typeof k() == "string" ? `${k()}-value` : null);
+				set_attribute(t, "data-pw", typeof re() == "string" ? `${re()}-value` : null), set_attribute(t, "testid", typeof re() == "string" ? `${re()}-value` : null);
 			}), append(e, t);
 		}, s = (e) => {
-			var t = root_19$1(), n = child(t, !0);
-			reset(t), template_effect(() => {
-				set_attribute(t, "data-pw", typeof k() == "string" ? `${k()}-value` : null), set_attribute(t, "testid", typeof k() == "string" ? `${k()}-value` : null), set_text(n, i());
+			var t = root_19$1(), n = child(t), a = (e) => {
+				AnimatedNumber(e, {
+					get value() {
+						return i();
+					},
+					get animateOnMount() {
+						return h();
+					}
+				});
+			}, o = /* @__PURE__ */ user_derived(() => lt("value", i())), s = (e) => {
+				var t = text();
+				template_effect(() => set_text(t, i())), append(e, t);
+			};
+			if_block(n, (e) => {
+				get(o) ? e(a) : e(s, -1);
+			}), reset(t), template_effect(() => {
+				set_attribute(t, "data-pw", typeof re() == "string" ? `${re()}-value` : null), set_attribute(t, "testid", typeof re() == "string" ? `${re()}-value` : null);
 			}), append(e, t);
 		};
 		if_block(n, (e) => {
@@ -32913,47 +33477,61 @@ function StatCard(e, t) {
 			var i = child(t, !0);
 			reset(t), template_effect(() => {
 				n = set_class(t, 1, "statcard-delta svelte-pfmus", null, n, {
-					"statcard-delta-positive": get(G) === !0,
-					"statcard-delta-negative": get(G) === !1
+					"statcard-delta-positive": get(ut) === !0,
+					"statcard-delta-negative": get(ut) === !1
 				}), set_text(i, a());
 			}), append(e, t);
 		};
 		if_block(c, (e) => {
-			get(be) && e(u);
+			get(dt) && e(u);
 		}), reset(t), append(e, t);
 	};
-	if_block(pt, (e) => {
-		get(Me) && u() ? e(mt) : e(ht, -1);
+	if_block(Ct, (e) => {
+		get(ft) && S() ? e(wt) : e(Tt, -1);
 	});
-	var gt = sibling(pt, 2), _t = (e) => {
-		var t = root_21$1(), n = child(t, !0);
-		reset(t), template_effect(() => {
-			set_attribute(t, "data-pw", typeof k() == "string" ? `${k()}-subtitle` : null), set_attribute(t, "testid", typeof k() == "string" ? `${k()}-subtitle` : null), set_text(n, s());
+	var Et = sibling(Ct, 2), Dt = (e) => {
+		var t = root_21$1(), n = child(t), i = (e) => {
+			AnimatedNumber(e, {
+				get value() {
+					return s();
+				},
+				get animateOnMount() {
+					return h();
+				}
+			});
+		}, a = /* @__PURE__ */ user_derived(() => lt("subtitle", s())), o = (e) => {
+			var t = text();
+			template_effect(() => set_text(t, s())), append(e, t);
+		};
+		if_block(n, (e) => {
+			get(a) ? e(i) : e(o, -1);
+		}), reset(t), template_effect(() => {
+			set_attribute(t, "data-pw", typeof re() == "string" ? `${re()}-subtitle` : null), set_attribute(t, "testid", typeof re() == "string" ? `${re()}-subtitle` : null);
 		}), append(e, t);
 	};
-	if_block(gt, (e) => {
-		typeof s() == "string" && s().length > 0 && e(_t);
+	if_block(Et, (e) => {
+		typeof s() == "string" && s().length > 0 && e(Dt);
 	});
-	var vt = sibling(gt, 2), yt = (e) => {
+	var Ot = sibling(Et, 2), kt = (e) => {
 		var t = root_22$1();
-		snippet(child(t), C), reset(t), append(e, t);
+		snippet(child(t), ne), reset(t), append(e, t);
 	};
-	if_block(vt, (e) => {
-		C() && e(yt);
+	if_block(Ot, (e) => {
+		ne() && e(kt);
 	});
-	var bt = sibling(vt, 2), xt = (e) => {
+	var At = sibling(Ot, 2), jt = (e) => {
 		var t = root_23$1();
 		snippet(child(t), c), reset(t), append(e, t);
 	};
-	return if_block(bt, (e) => {
-		typeof c() == "function" && e(xt);
-	}), reset(lt), template_effect(() => {
-		ut = set_class(lt, 1, `statcard ${R() ?? "" ?? ""}`, "svelte-pfmus", ut, { "statcard-interactive": get(re) }), set_attribute(lt, "data-pw", typeof k() == "string" ? k() : null), set_attribute(lt, "testid", typeof k() == "string" ? k() : null), set_attribute(lt, "role", get(re) ? "button" : null), set_attribute(lt, "tabindex", get(re) ? 0 : null);
-	}), delegated("click", lt, function(...e) {
-		(get(re) ? te() : null)?.apply(this, e);
-	}), delegated("keydown", lt, function(...e) {
-		(get(re) ? it : null)?.apply(this, e);
-	}), append(e, lt), pop(ct);
+	return if_block(At, (e) => {
+		typeof c() == "function" && e(jt);
+	}), reset(yt), attach(yt, () => at(get(it))), template_effect(() => {
+		bt = set_class(yt, 1, `statcard ${G() ?? "" ?? ""}`, "svelte-pfmus", bt, { "statcard-interactive": get(Re) }), set_attribute(yt, "data-pw", typeof re() == "string" ? re() : null), set_attribute(yt, "testid", typeof re() == "string" ? re() : null), set_attribute(yt, "role", get(Re) ? "button" : null), set_attribute(yt, "tabindex", get(Re) ? 0 : null);
+	}), delegated("click", yt, function(...e) {
+		(get(Re) ? be() : null)?.apply(this, e);
+	}), delegated("keydown", yt, function(...e) {
+		(get(Re) ? ht : null)?.apply(this, e);
+	}), append(e, yt), pop(vt);
 }
 delegate(["click", "keydown"]), create_custom_element(StatCard, {
 	title: {},
@@ -32963,6 +33541,10 @@ delegate(["click", "keydown"]), create_custom_element(StatCard, {
 	subtitle: {},
 	footer: {},
 	valueSnippet: {},
+	animateValue: {},
+	animatePrimary: {},
+	primary: {},
+	animateOnMount: {},
 	rows: {},
 	rowsDirection: {},
 	tooltip: {},
@@ -32988,10 +33570,27 @@ var rest_excludes$35 = new Set([
 };
 function StatCard_wc(e, t) {
 	push(t, !0), append_styles$1(e, $$css$73);
-	let n = prop(t, "statCardTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$35), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
-	return StatCard(e, spread_props(() => i, () => get(o), {
+	let n = (e) => {
+		var n = comment(), i = first_child(n), a = (e) => {
+			AnimatedNumber(e, {
+				get value() {
+					return t.value;
+				},
+				get animateOnMount() {
+					return t.animateOnMount;
+				}
+			});
+		}, o = (e) => {
+			var n = text();
+			template_effect(() => set_text(n, t.value)), append(e, n);
+		};
+		if_block(i, (e) => {
+			get(c) ? e(a) : e(o, -1);
+		}), append(e, n);
+	}, i = prop(t, "statCardTitle", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$35), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a)), c = /* @__PURE__ */ user_derived(() => isAnimatableMetric(String(t.value ?? "")) && (t.animatePrimary ? t.primary === void 0 || t.primary === "auto" || t.primary === "value" : !!t.animateValue));
+	return StatCard(e, spread_props(() => a, () => get(s), {
 		get title() {
-			return n();
+			return i();
 		},
 		headerRight: (e) => {
 			var n = comment();
@@ -33002,11 +33601,10 @@ function StatCard_wc(e, t) {
 			slot(first_child(n), t, "footer", {}, null), append(e, n);
 		},
 		valueSnippet: (e) => {
-			var n = comment();
-			slot(first_child(n), t, "value-snippet", {}, (e) => {
-				var n = text();
-				template_effect(() => set_text(n, t.value)), append(e, n);
-			}), append(e, n);
+			var i = comment();
+			slot(first_child(i), t, "value-snippet", {}, (e) => {
+				n(e);
+			}), append(e, i);
 		},
 		children: (e, n) => {
 			var i = comment();
@@ -33020,10 +33618,10 @@ function StatCard_wc(e, t) {
 		}
 	})), pop({
 		get statCardTitle() {
-			return n();
+			return i();
 		},
 		set statCardTitle(e) {
-			n(e), flushSync();
+			i(e), flushSync();
 		}
 	});
 }
@@ -33050,6 +33648,25 @@ customElements.define("sui-stat-card", create_custom_element(StatCard_wc, {
 		reflect: !0,
 		type: "String"
 	},
+	animateValue: {
+		attribute: "animate-value",
+		reflect: !0,
+		type: "Boolean"
+	},
+	animatePrimary: {
+		attribute: "animate-primary",
+		reflect: !0,
+		type: "Boolean"
+	},
+	primary: {
+		reflect: !0,
+		type: "String"
+	},
+	animateOnMount: {
+		attribute: "animate-on-mount",
+		reflect: !0,
+		type: "Boolean"
+	},
 	rows: { type: "Object" },
 	rowsDirection: {
 		attribute: "rows-direction",
@@ -33103,6 +33720,10 @@ customElements.define("sui-delta-indicator", create_custom_element(DeltaIndicato
 		attribute: "neutral-threshold",
 		type: "Number"
 	},
+	animateValue: {
+		attribute: "animate-value",
+		type: "Boolean"
+	},
 	format: { type: "Object" },
 	testId: {
 		attribute: "test-id",
@@ -33112,7 +33733,7 @@ customElements.define("sui-delta-indicator", create_custom_element(DeltaIndicato
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/ProportionBar/ProportionBar.svelte
-var root$34 = /* @__PURE__ */ from_svg("<rect><title> </title></rect>"), root_1$33 = /* @__PURE__ */ from_html("<li class=\"proportion-bar-legend-item svelte-kuxrgu\"><span class=\"proportion-bar-swatch svelte-kuxrgu\" aria-hidden=\"true\"></span> <span class=\"proportion-bar-legend-label svelte-kuxrgu\"> </span> <span class=\"proportion-bar-legend-value svelte-kuxrgu\"> </span></li>"), root_2$24 = /* @__PURE__ */ from_html("<ul class=\"proportion-bar-legend svelte-kuxrgu\" aria-label=\"Segment breakdown\"></ul>"), root_3$23 = /* @__PURE__ */ from_html("<div><div class=\"proportion-bar-track svelte-kuxrgu\"><svg viewBox=\"0 0 100 10\" preserveAspectRatio=\"none\" class=\"proportion-bar-svg svelte-kuxrgu\"></svg></div> <!></div>"), $$css$71 = {
+var root$34 = /* @__PURE__ */ from_svg("<rect><title> </title></rect>"), root_1$33 = /* @__PURE__ */ from_html("<li class=\"proportion-bar-legend-item svelte-kuxrgu\"><span class=\"proportion-bar-swatch svelte-kuxrgu\" aria-hidden=\"true\"></span> <span class=\"proportion-bar-legend-label svelte-kuxrgu\"> </span> <span class=\"proportion-bar-legend-value svelte-kuxrgu\"><!></span></li>"), root_2$24 = /* @__PURE__ */ from_html("<ul class=\"proportion-bar-legend svelte-kuxrgu\" aria-label=\"Segment breakdown\"></ul>"), root_3$23 = /* @__PURE__ */ from_html("<div><div class=\"proportion-bar-track svelte-kuxrgu\"><svg viewBox=\"0 0 100 10\" preserveAspectRatio=\"none\" class=\"proportion-bar-svg svelte-kuxrgu\"></svg></div> <!></div>"), $$css$71 = {
 	hash: "svelte-kuxrgu",
 	code: ".proportion-bar.svelte-kuxrgu {display:flex;flex-direction:column;gap:var(--proportion-bar-gap, 10px);width:var(--proportion-bar-width, 100%);}.proportion-bar-track.svelte-kuxrgu {width:100%;height:var(--proportion-bar-track-height, 10px);border-radius:var(--proportion-bar-track-border-radius, var(--radius, 4px));overflow:hidden;background:var(--proportion-bar-track-bg, #f0f0f0);}.proportion-bar-svg.svelte-kuxrgu {display:block;width:100%;height:100%;}.proportion-bar-legend.svelte-kuxrgu {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--proportion-bar-legend-gap, 6px);}.proportion-bar-legend-item.svelte-kuxrgu {display:flex;align-items:center;gap:var(--proportion-bar-legend-item-gap, 8px);}.proportion-bar-swatch.svelte-kuxrgu {display:inline-block;width:var(--proportion-bar-swatch-size, 10px);height:var(--proportion-bar-swatch-size, 10px);border-radius:var(--proportion-bar-swatch-border-radius, var(--radius, 4px));flex-shrink:0;}.proportion-bar-legend-label.svelte-kuxrgu {flex:1;font-size:var(--proportion-bar-legend-label-font-size, 13px);font-weight:var(--proportion-bar-legend-label-font-weight, 400);color:var(--proportion-bar-legend-label-color, #374151);line-height:1.4;}.proportion-bar-legend-value.svelte-kuxrgu {font-size:var(--proportion-bar-legend-value-font-size, 13px);font-weight:var(--proportion-bar-legend-value-font-weight, 500);color:var(--proportion-bar-legend-value-color, #111827);line-height:1.4;white-space:nowrap;}"
 };
@@ -33124,23 +33745,23 @@ function ProportionBar(e, t) {
 		"#62D5C0",
 		"#FF74CD",
 		"#D1E7FF"
-	], i = prop(t, "segments", 7), a = prop(t, "showLegend", 7, !0), o = prop(t, "valueFormat", 7), s = prop(t, "trackHeight", 7), c = prop(t, "testId", 7), l = prop(t, "classes", 7), u = (e, t) => typeof e.color == "string" && e.color.length > 0 ? e.color : n[t % n.length], f = (e) => Number.isFinite(e) && e > 0 ? e : 0, p = /* @__PURE__ */ user_derived(() => i().reduce((e, t) => e + f(t.value), 0)), h = /* @__PURE__ */ user_derived(() => i().map((e, t) => {
-		let n = f(e.value), i = get(p) > 0 ? n / get(p) * 100 : 0;
+	], i = prop(t, "segments", 7), a = prop(t, "showLegend", 7, !0), o = prop(t, "valueFormat", 7), s = prop(t, "trackHeight", 7), c = prop(t, "animateValue", 7, !1), l = prop(t, "testId", 7), u = prop(t, "classes", 7), f = (e, t) => typeof e.color == "string" && e.color.length > 0 ? e.color : n[t % n.length], p = (e) => Number.isFinite(e) && e > 0 ? e : 0, h = /* @__PURE__ */ user_derived(() => i().reduce((e, t) => e + p(t.value), 0)), S = /* @__PURE__ */ user_derived(() => i().map((e, t) => {
+		let n = p(e.value), i = get(h) > 0 ? n / get(h) * 100 : 0;
 		return {
 			label: e.label,
 			value: n,
 			percent: i,
-			color: u(e, t)
+			color: f(e, t)
 		};
-	})), S = (e, t) => `${e.toLocaleString()} (${Math.round(t)}%)`, C = (e, t) => (o() ?? S)(e, t), k = /* @__PURE__ */ user_derived(() => get(h).map((e) => `${e.label}: ${C(e.value, e.percent)}`).join(", ")), R = /* @__PURE__ */ user_derived(() => get(h).reduce((e, t) => {
+	})), C = (e, t) => `${e.toLocaleString()} (${Math.round(t)}%)`, k = (e, t) => (o() ?? C)(e, t), R = /* @__PURE__ */ user_derived(() => get(S).map((e) => `${e.label}: ${k(e.value, e.percent)}`).join(", ")), te = /* @__PURE__ */ user_derived(() => get(S).reduce((e, t) => {
 		let n = e.length > 0 ? e[e.length - 1].x + e[e.length - 1].width : 0;
 		return e.push({
 			x: n,
 			width: t.percent,
 			color: t.color
 		}), e;
-	}, [])), te = /* @__PURE__ */ user_derived(() => typeof s() == "string" && s().length > 0 ? `--proportion-bar-track-height: ${s()};` : "");
-	var ne = {
+	}, [])), ne = /* @__PURE__ */ user_derived(() => typeof s() == "string" && s().length > 0 ? `--proportion-bar-track-height: ${s()};` : "");
+	var re = {
 		get segments() {
 			return i();
 		},
@@ -33165,51 +33786,70 @@ function ProportionBar(e, t) {
 		set trackHeight(e) {
 			s(e), flushSync();
 		},
-		get testId() {
+		get animateValue() {
 			return c();
 		},
-		set testId(e) {
+		set animateValue(e = !1) {
 			c(e), flushSync();
 		},
-		get classes() {
+		get testId() {
 			return l();
 		},
-		set classes(e) {
+		set testId(e) {
 			l(e), flushSync();
+		},
+		get classes() {
+			return u();
+		},
+		set classes(e) {
+			u(e), flushSync();
 		}
-	}, re = root_3$23(), G = child(re), be = child(G);
-	each(be, 21, () => get(R), index, (e, t, n) => {
+	}, G = root_3$23(), be = child(G), Me = child(be);
+	each(Me, 21, () => get(te), index, (e, t, n) => {
 		var i = root$34();
 		set_attribute(i, "y", 0), set_attribute(i, "height", 10);
 		var a = child(i), o = child(a);
 		reset(a), reset(i), template_effect((e) => {
-			set_attribute(i, "x", get(t).x), set_attribute(i, "width", get(t).width), set_attribute(i, "fill", get(t).color), set_text(o, `${get(h)[n].label ?? ""}: ${e ?? ""}`);
-		}, [() => C(get(h)[n].value, get(h)[n].percent)]), append(e, i);
-	}), reset(be), reset(G);
-	var Me = sibling(G, 2), Re = (e) => {
+			set_attribute(i, "x", get(t).x), set_attribute(i, "width", get(t).width), set_attribute(i, "fill", get(t).color), set_text(o, `${get(S)[n].label ?? ""}: ${e ?? ""}`);
+		}, [() => k(get(S)[n].value, get(S)[n].percent)]), append(e, i);
+	}), reset(Me), reset(be);
+	var Re = sibling(be, 2), Ue = (e) => {
 		var t = root_2$24();
-		each(t, 21, () => get(h), index, (e, t, n) => {
+		each(t, 21, () => get(S), index, (e, t, n) => {
 			var i = root_1$33(), a = child(i), o = sibling(a, 2), s = child(o, !0);
 			reset(o);
-			var l = sibling(o, 2), u = child(l, !0);
-			reset(l), reset(i), template_effect((e) => {
-				set_attribute(i, "data-pw", typeof c() == "string" ? `${c()}-legend-item-${n}` : null), set_attribute(i, "testid", typeof c() == "string" ? `${c()}-legend-item-${n}` : null), set_style(a, `background: ${get(t).color ?? ""};`), set_text(s, get(t).label), set_text(u, e);
-			}, [() => C(get(t).value, get(t).percent)]), append(e, i);
+			var u = sibling(o, 2), f = child(u), p = (e) => {
+				{
+					let n = /* @__PURE__ */ user_derived(() => k(get(t).value, get(t).percent));
+					AnimatedNumber(e, { get value() {
+						return get(n);
+					} });
+				}
+			}, h = (e) => {
+				var n = text();
+				template_effect((e) => set_text(n, e), [() => k(get(t).value, get(t).percent)]), append(e, n);
+			};
+			if_block(f, (e) => {
+				c() ? e(p) : e(h, -1);
+			}), reset(u), reset(i), template_effect(() => {
+				set_attribute(i, "data-pw", typeof l() == "string" ? `${l()}-legend-item-${n}` : null), set_attribute(i, "testid", typeof l() == "string" ? `${l()}-legend-item-${n}` : null), set_style(a, `background: ${get(t).color ?? ""};`), set_text(s, get(t).label);
+			}), append(e, i);
 		}), reset(t), template_effect(() => {
-			set_attribute(t, "data-pw", typeof c() == "string" ? `${c()}-legend` : null), set_attribute(t, "testid", typeof c() == "string" ? `${c()}-legend` : null);
+			set_attribute(t, "data-pw", typeof l() == "string" ? `${l()}-legend` : null), set_attribute(t, "testid", typeof l() == "string" ? `${l()}-legend` : null);
 		}), append(e, t);
 	};
-	return if_block(Me, (e) => {
-		a() && e(Re);
-	}), reset(re), template_effect(() => {
-		set_class(re, 1, `proportion-bar ${l() ?? "" ?? ""}`, "svelte-kuxrgu"), set_style(re, get(te)), set_attribute(re, "data-pw", typeof c() == "string" ? c() : null), set_attribute(re, "testid", typeof c() == "string" ? c() : null), set_attribute(be, "role", a() ? null : "img"), set_attribute(be, "aria-hidden", a() ? "true" : null), set_attribute(be, "aria-label", a() ? null : get(k)), set_attribute(be, "data-pw", typeof c() == "string" ? `${c()}-svg` : null), set_attribute(be, "testID", typeof c() == "string" ? `${c()}-svg` : null);
-	}), append(e, re), pop(ne);
+	return if_block(Re, (e) => {
+		a() && e(Ue);
+	}), reset(G), template_effect(() => {
+		set_class(G, 1, `proportion-bar ${u() ?? "" ?? ""}`, "svelte-kuxrgu"), set_style(G, get(ne)), set_attribute(G, "data-pw", typeof l() == "string" ? l() : null), set_attribute(G, "testid", typeof l() == "string" ? l() : null), set_attribute(Me, "role", a() ? null : "img"), set_attribute(Me, "aria-hidden", a() ? "true" : null), set_attribute(Me, "aria-label", a() ? null : get(R)), set_attribute(Me, "data-pw", typeof l() == "string" ? `${l()}-svg` : null), set_attribute(Me, "testID", typeof l() == "string" ? `${l()}-svg` : null);
+	}), append(e, G), pop(re);
 }
 create_custom_element(ProportionBar, {
 	segments: {},
 	showLegend: {},
 	valueFormat: {},
 	trackHeight: {},
+	animateValue: {},
 	testId: {},
 	classes: {}
 }, [], [], { mode: "open" });
@@ -33240,6 +33880,10 @@ customElements.define("sui-proportion-bar", create_custom_element(ProportionBar_
 		attribute: "track-height",
 		type: "String"
 	},
+	animateValue: {
+		attribute: "animate-value",
+		type: "Boolean"
+	},
 	testId: {
 		attribute: "test-id",
 		type: "String"
@@ -34183,27 +34827,27 @@ function dismissOnOutsidePointerDown(e, t) {
 }
 //#endregion
 //#region src/lib/PieChart/PieChart.svelte
-var root$31 = /* @__PURE__ */ from_html("<div class=\"chart-empty svelte-1478ug\"><!></div>"), root_1$29 = /* @__PURE__ */ from_html("<button type=\"button\"><span class=\"legend-swatch svelte-1478ug\"></span> <span class=\"legend-label svelte-1478ug\"> </span></button>"), root_2$21 = /* @__PURE__ */ from_html("<div class=\"pie-legend-sync svelte-1478ug\"></div>"), root_3$20 = /* @__PURE__ */ from_svg("<text text-anchor=\"middle\" dominant-baseline=\"middle\"> </text>"), root_4$19 = /* @__PURE__ */ from_svg("<path tabindex=\"0\" role=\"button\"></path><!>", 1), root_5$18 = /* @__PURE__ */ from_svg("<foreignObject><div class=\"pie-center-content svelte-1478ug\" xmlns=\"http://www.w3.org/1999/xhtml\"><!></div></foreignObject>"), root_6$18 = /* @__PURE__ */ from_svg("<g><!><!></g>"), root_7$16 = /* @__PURE__ */ from_html("<div class=\"pie-delta-badge svelte-1478ug\"><!></div>"), root_8$14 = /* @__PURE__ */ from_html("<li class=\"pie-legend-row svelte-1478ug\"><span class=\"pie-legend-swatch svelte-1478ug\"></span> <span class=\"pie-legend-label svelte-1478ug\"> </span> <span class=\"pie-legend-value svelte-1478ug\"> </span></li>"), root_9$11 = /* @__PURE__ */ from_html("<button> </button>"), root_10$10 = /* @__PURE__ */ from_html("<div class=\"pie-legend-column svelte-1478ug\"><ul class=\"pie-legend-values svelte-1478ug\"></ul> <!></div>"), root_11$8 = /* @__PURE__ */ from_html("<div class=\"sr-only svelte-1478ug\" role=\"status\" aria-live=\"polite\" data-pw=\"pie-status\"> </div> <!> <!> <!> <!> <!>", 1), root_12$7 = /* @__PURE__ */ from_html("<div><!></div>"), $$css$66 = {
+var root$31 = /* @__PURE__ */ from_html("<div class=\"chart-empty svelte-1478ug\"><!></div>"), root_1$29 = /* @__PURE__ */ from_html("<button type=\"button\"><span class=\"legend-swatch svelte-1478ug\"></span> <span class=\"legend-label svelte-1478ug\"> </span></button>"), root_2$21 = /* @__PURE__ */ from_html("<div class=\"pie-legend-sync svelte-1478ug\"></div>"), root_3$20 = /* @__PURE__ */ from_svg("<text text-anchor=\"middle\" dominant-baseline=\"middle\"> </text>"), root_4$19 = /* @__PURE__ */ from_svg("<path tabindex=\"0\" role=\"button\"></path><!>", 1), root_5$18 = /* @__PURE__ */ from_svg("<foreignObject><div class=\"pie-center-content svelte-1478ug\" xmlns=\"http://www.w3.org/1999/xhtml\"><!></div></foreignObject>"), root_6$18 = /* @__PURE__ */ from_svg("<g><!><!></g>"), root_7$16 = /* @__PURE__ */ from_html("<div class=\"pie-delta-badge svelte-1478ug\"><!></div>"), root_8$14 = /* @__PURE__ */ from_html("<li class=\"pie-legend-row svelte-1478ug\"><span class=\"pie-legend-swatch svelte-1478ug\"></span> <span class=\"pie-legend-label svelte-1478ug\"> </span> <span class=\"pie-legend-value svelte-1478ug\"><!></span></li>"), root_9$11 = /* @__PURE__ */ from_html("<button> </button>"), root_10$10 = /* @__PURE__ */ from_html("<div class=\"pie-legend-column svelte-1478ug\"><ul class=\"pie-legend-values svelte-1478ug\"></ul> <!></div>"), root_11$8 = /* @__PURE__ */ from_html("<div class=\"sr-only svelte-1478ug\" role=\"status\" aria-live=\"polite\" data-pw=\"pie-status\"> </div> <!> <!> <!> <!> <!>", 1), root_12$7 = /* @__PURE__ */ from_html("<div><!></div>"), $$css$66 = {
 	hash: "svelte-1478ug",
 	code: ".pie-chart.svelte-1478ug {width:100%;position:relative;}.slice.svelte-1478ug {stroke:var(--piechart-stroke-color, #fff);stroke-width:var(--piechart-stroke-width, 2);transition:transform var(--chart-transition-duration, var(--motion-duration, 0.2s))\n        var(--chart-transition-easing, var(--motion-easing, ease)),\n      opacity var(--chart-transition-duration, var(--motion-duration, 0.2s))\n        var(--chart-transition-easing, var(--motion-easing, ease));transform-origin:0 0;cursor:pointer;}.slice.hovered.svelte-1478ug {transform:scale(var(--piechart-hover-scale, 1.05));opacity:1;}.slice.dimmed.svelte-1478ug {opacity:var(--piechart-dimmed-opacity, 0.3);}.slice.svelte-1478ug:focus-visible {outline:var(--piechart-slice-focus-outline, 2px solid currentColor);outline-offset:var(--piechart-slice-focus-outline-offset, 2px);}.slice-label.svelte-1478ug {fill:var(--piechart-label-color, #333);font-size:var(--piechart-label-font-size, 12px);font-family:var(--chart-font-family, inherit);pointer-events:none;}.slice-label.label-outside.svelte-1478ug {fill:var(--piechart-label-color, #555);}.pie-center-content.svelte-1478ug {width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;}.pie-delta-badge.svelte-1478ug {position:absolute;top:var(--piechart-delta-top, 8px);right:var(--piechart-delta-right, 8px);z-index:2;pointer-events:none;}.chart-empty.svelte-1478ug {padding:var(--chart-empty-padding, 32px 24px);color:var(--chart-empty-color, #9ca3af);text-align:center;}\n  /* Standard visually-hidden recipe (matches ChatComposer's .sr-only): present\n     for assistive tech, removed from layout and the visual canvas. */.sr-only.svelte-1478ug {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}.pie-legend-sync.svelte-1478ug {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--chart-legend-gap, 16px);font-family:var(--chart-font-family, inherit);padding:8px 0;}.pie-legend-sync-item.svelte-1478ug {display:flex;align-items:center;gap:6px;background:none;border:none;margin:0;padding:var(--piechart-legend-sync-padding, 2px 4px);font:inherit;cursor:var(--cursor, pointer);border-radius:var(--piechart-legend-sync-radius, var(--radius, 4px));}.pie-legend-sync-item.svelte-1478ug .legend-swatch:where(.svelte-1478ug) {display:inline-block;width:var(--chart-legend-swatch-size, 12px);height:var(--chart-legend-swatch-size, 12px);border-radius:var(--chart-swatch-radius, 2px);flex-shrink:0;}.pie-legend-sync-item.svelte-1478ug .legend-label:where(.svelte-1478ug) {font-size:var(--chart-legend-font-size, 12px);color:var(--chart-legend-color, light-dark(#333, #e5e7eb));}.pie-legend-sync-item.legend-sync-active.svelte-1478ug {background:var(\n      --piechart-legend-sync-active-background,\n      light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1))\n    );}.pie-legend-sync-item.svelte-1478ug:focus-visible {outline:var(--piechart-legend-sync-focus-outline, 2px solid currentColor);outline-offset:2px;}.pie-legend-values.svelte-1478ug {display:flex;flex-direction:column;gap:var(--piechart-legend-gap, 8px);padding:var(--piechart-legend-padding, 12px 0 0 0);font-family:var(--chart-font-family, inherit);list-style:none;margin:0;}.pie-legend-row.svelte-1478ug {display:flex;align-items:center;gap:var(--piechart-legend-row-gap, 6px);}.pie-legend-swatch.svelte-1478ug {display:inline-block;width:var(--chart-legend-swatch-size, 12px);height:var(--chart-legend-swatch-size, 12px);border-radius:var(--piechart-legend-swatch-radius, var(--radius, 4px));flex-shrink:0;}.pie-legend-label.svelte-1478ug {font-size:var(--chart-legend-font-size, 12px);color:var(--chart-legend-color, #333);min-width:var(--piechart-legend-label-min-width, 120px);}.pie-legend-value.svelte-1478ug {margin-left:auto;font-size:var(--piechart-legend-value-font-size, 12px);color:var(--piechart-legend-value-color, #333);min-width:var(--piechart-legend-value-min-width, 60px);text-align:right;}\n\n  /* The column wrapper is present in both placements so the markup does not\n     fork; as a plain block it changes nothing about the default below-chart\n     rendering. */.pie-legend-column.svelte-1478ug {display:flex;flex-direction:column;}\n\n  /* Only the values legend moves beside the chart -- the plain top legend is\n     mutually exclusive with it, and the delta badge and tooltip are both\n     absolutely positioned, so they stay out of this flex row entirely. */.pie-chart.legend-right.svelte-1478ug {display:flex;flex-direction:row;align-items:center;gap:var(--piechart-legend-column-gap, 16px);}.pie-chart.legend-right.svelte-1478ug .chart-container {\n    /* flex-basis 0 rather than auto: the container carries width:100%, which\n       as a flex item would otherwise claim the whole row and squeeze the\n       legend to nothing. */flex:1 1 0;min-width:0;}.pie-chart.legend-right.svelte-1478ug .pie-legend-column:where(.svelte-1478ug) {flex:0 0 auto;max-width:var(--piechart-legend-column-max-width, 50%);}.pie-chart.legend-right.svelte-1478ug .pie-legend-values:where(.svelte-1478ug) {padding:var(--piechart-legend-column-padding, 0);}.pie-legend-more.svelte-1478ug {align-self:flex-start;margin-top:var(--piechart-legend-more-margin-top, 8px);padding:var(--piechart-legend-more-padding, 2px 4px);border:none;background:none;cursor:var(--cursor, pointer);font-size:var(--piechart-legend-more-font-size, 12px);font-family:inherit;color:var(--piechart-legend-more-color, #2563eb);}.pie-legend-more.svelte-1478ug:hover {text-decoration:underline;}.pie-legend-more.svelte-1478ug:focus-visible {outline:var(--piechart-legend-more-focus-outline, 2px solid currentColor);outline-offset:2px;}"
 };
 function PieChart(e, t) {
 	let n = props_id();
 	push(t, !0), append_styles$1(e, $$css$66);
-	let i = prop(t, "data", 7), a = prop(t, "innerRadius", 7, 0), o = prop(t, "padAngle", 7, .02), s = prop(t, "showLabels", 7, !1), c = prop(t, "showValues", 7, !1), l = prop(t, "labelPosition", 7, "outside"), u = prop(t, "showLegend", 7, !1), f = prop(t, "startAngle", 23, () => -Math.PI / 2), p = prop(t, "aspectRatio", 7), h = prop(t, "maxHeight", 7, 420), S = prop(t, "minHeight", 7, 0), C = prop(t, "valueFormat", 7), k = prop(t, "tooltipSnippet", 7), R = prop(t, "center", 7), te = prop(t, "empty", 7), ne = prop(t, "onsliceclick", 7), re = prop(t, "onslicehover", 7), G = prop(t, "testId", 7), be = prop(t, "classes", 7), Me = prop(t, "tooltipPortal", 7, !1), Re = prop(t, "semiCircle", 7, !1), Ue = prop(t, "legendShowValues", 7, !1), it = prop(t, "legendPosition", 7, "bottom"), at = prop(t, "legendMaxItems", 7), ot = prop(t, "onlegendmore", 7), ct = prop(t, "percentDecimals", 7, 0), lt = prop(t, "onchartready", 7), ut = prop(t, "highlightedIndex", 7, null), dt = prop(t, "changePercentage", 7), ft = prop(t, "changeInvertColors", 7, !1), pt = /* @__PURE__ */ state(!1), mt = /* @__PURE__ */ state(null), ht = /* @__PURE__ */ state(0), gt = /* @__PURE__ */ state(0), _t = /* @__PURE__ */ state(null), vt = /* @__PURE__ */ state(null), yt = /* @__PURE__ */ state(null), bt = /* @__PURE__ */ state(0), xt = /* @__PURE__ */ state(0), St = /* @__PURE__ */ state(2);
+	let i = prop(t, "data", 7), a = prop(t, "innerRadius", 7, 0), o = prop(t, "padAngle", 7, .02), s = prop(t, "showLabels", 7, !1), c = prop(t, "showValues", 7, !1), l = prop(t, "labelPosition", 7, "outside"), u = prop(t, "showLegend", 7, !1), f = prop(t, "startAngle", 23, () => -Math.PI / 2), p = prop(t, "aspectRatio", 7), h = prop(t, "maxHeight", 7, 420), S = prop(t, "minHeight", 7, 0), C = prop(t, "valueFormat", 7), k = prop(t, "tooltipSnippet", 7), R = prop(t, "center", 7), te = prop(t, "empty", 7), ne = prop(t, "onsliceclick", 7), re = prop(t, "onslicehover", 7), G = prop(t, "testId", 7), be = prop(t, "classes", 7), Me = prop(t, "tooltipPortal", 7, !1), Re = prop(t, "semiCircle", 7, !1), Ue = prop(t, "legendShowValues", 7, !1), it = prop(t, "legendPosition", 7, "bottom"), at = prop(t, "legendMaxItems", 7), ot = prop(t, "onlegendmore", 7), ct = prop(t, "animateLegendValues", 7, !1), lt = prop(t, "percentDecimals", 7, 0), ut = prop(t, "onchartready", 7), dt = prop(t, "highlightedIndex", 7, null), ft = prop(t, "changePercentage", 7), pt = prop(t, "changeInvertColors", 7, !1), mt = /* @__PURE__ */ state(!1), ht = /* @__PURE__ */ state(null), gt = /* @__PURE__ */ state(0), _t = /* @__PURE__ */ state(0), vt = /* @__PURE__ */ state(null), yt = /* @__PURE__ */ state(null), bt = /* @__PURE__ */ state(null), xt = /* @__PURE__ */ state(0), St = /* @__PURE__ */ state(0), Ct = /* @__PURE__ */ state(2);
 	onMount(() => {
-		if (lt()?.({
+		if (ut()?.({
 			highlight: (e) => {
-				set(yt, e, !0);
+				set(bt, e, !0);
 			},
 			getCategories: () => i().map((e) => e.label),
 			type: "donut-chart"
-		}), typeof window < "u" && get(mt) !== null) {
-			let e = getComputedStyle(get(mt)).getPropertyValue("--piechart-semi-aspect-ratio").trim(), t = parseFloat(e);
-			!Number.isNaN(t) && t > 0 && set(St, t, !0);
+		}), typeof window < "u" && get(ht) !== null) {
+			let e = getComputedStyle(get(ht)).getPropertyValue("--piechart-semi-aspect-ratio").trim(), t = parseFloat(e);
+			!Number.isNaN(t) && t > 0 && set(Ct, t, !0);
 		}
 	});
-	let Ct = /* @__PURE__ */ user_derived(() => get(vt) ?? get(_t)), wt = /* @__PURE__ */ user_derived(() => get(Ct) ?? ut() ?? get(yt)), Tt = /* @__PURE__ */ user_derived(() => C() ?? formatNumber), Et = /* @__PURE__ */ user_derived(() => i().reduce((e, t) => e + pieSliceValue(t.value), 0)), Dt = /* @__PURE__ */ user_derived(() => (e) => get(Et) === 0 ? "0%" : (e / get(Et) * 100).toFixed(ct()) + "%"), Ot = /* @__PURE__ */ user_derived(() => i().length === 0 || get(Et) === 0), kt = /* @__PURE__ */ user_derived(() => p() ?? (Re() ? get(St) : 1)), At = /* @__PURE__ */ user_derived(() => get(ht) / 2), jt = /* @__PURE__ */ user_derived(() => Re() ? get(gt) : get(gt) / 2), Mt = /* @__PURE__ */ user_derived(() => Re() ? Math.max(10, get(ht) / 2 - (s() && l() === "outside" ? 40 : 10)) : Math.max(10, Math.min(get(At), get(jt)) - (s() && l() === "outside" ? 40 : 10))), Nt = /* @__PURE__ */ user_derived(() => a() > 0 ? get(Mt) * Math.min(.95, a()) : 0), Pt = /* @__PURE__ */ user_derived(() => {
+	let wt = /* @__PURE__ */ user_derived(() => get(yt) ?? get(vt)), Tt = /* @__PURE__ */ user_derived(() => get(wt) ?? dt() ?? get(bt)), Et = /* @__PURE__ */ user_derived(() => C() ?? formatNumber), Dt = /* @__PURE__ */ user_derived(() => i().reduce((e, t) => e + pieSliceValue(t.value), 0)), Ot = /* @__PURE__ */ user_derived(() => (e) => get(Dt) === 0 ? "0%" : (e / get(Dt) * 100).toFixed(lt()) + "%"), kt = /* @__PURE__ */ user_derived(() => (e) => `${get(Et)(e)}\u00A0${get(Ot)(e)}`), At = /* @__PURE__ */ user_derived(() => i().length === 0 || get(Dt) === 0), jt = /* @__PURE__ */ user_derived(() => p() ?? (Re() ? get(Ct) : 1)), Mt = /* @__PURE__ */ user_derived(() => get(gt) / 2), Nt = /* @__PURE__ */ user_derived(() => Re() ? get(_t) : get(_t) / 2), Pt = /* @__PURE__ */ user_derived(() => Re() ? Math.max(10, get(gt) / 2 - (s() && l() === "outside" ? 40 : 10)) : Math.max(10, Math.min(get(Mt), get(Nt)) - (s() && l() === "outside" ? 40 : 10))), It = /* @__PURE__ */ user_derived(() => a() > 0 ? get(Pt) * Math.min(.95, a()) : 0), Lt = /* @__PURE__ */ user_derived(() => {
 		let e = Re() ? -Math.PI / 2 : f();
 		return computePieLayout(i(), e, o()).map((e) => {
 			let t = e.startAngle, n = e.endAngle, a = e.midAngle;
@@ -34211,43 +34855,43 @@ function PieChart(e, t) {
 				let i = -Math.PI / 2;
 				t = i + (e.startAngle - i) / 2, n = i + (e.endAngle - i) / 2, a = i + (e.midAngle - i) / 2;
 			}
-			let o = e.color ?? i()[e.index]?.color ?? getColor(e.index), s = l() === "outside" ? get(Mt) + 16 : (get(Nt) + get(Mt)) / 2;
+			let o = e.color ?? i()[e.index]?.color ?? getColor(e.index), s = l() === "outside" ? get(Pt) + 16 : (get(It) + get(Pt)) / 2;
 			return {
 				...e,
 				startAngle: t,
 				endAngle: n,
 				midAngle: a,
 				color: o,
-				path: arcPath(0, 0, get(Nt), get(Mt), t, n),
+				path: arcPath(0, 0, get(It), get(Pt), t, n),
 				labelX: s * Math.cos(a),
 				labelY: s * Math.sin(a)
 			};
 		});
-	}), It = /* @__PURE__ */ user_derived(() => typeof at() == "number" && Number.isFinite(at()) && at() > 0 ? Math.max(1, Math.floor(at())) : null), Lt = (e, t) => {
-		set(pt, !1);
+	}), Rt = /* @__PURE__ */ user_derived(() => typeof at() == "number" && Number.isFinite(at()) && at() > 0 ? Math.max(1, Math.floor(at())) : null), zt = (e, t) => {
+		set(mt, !1);
 	};
 	user_effect(() => {
-		Lt(get(It), i().length);
+		zt(get(Rt), i().length);
 	});
-	let Rt = /* @__PURE__ */ user_derived(() => get(It) === null ? 0 : Math.max(0, i().length - get(It))), zt = /* @__PURE__ */ user_derived(() => get(It) === null || get(pt) ? i() : i().slice(0, get(It))), Bt = /* @__PURE__ */ user_derived(() => !get(Ot) && u() && Ue() && it() === "right"), Ht = `pie-legend-${n}`, Gt = () => {
+	let Bt = /* @__PURE__ */ user_derived(() => get(Rt) === null ? 0 : Math.max(0, i().length - get(Rt))), Ht = /* @__PURE__ */ user_derived(() => get(Rt) === null || get(mt) ? i() : i().slice(0, get(Rt))), Gt = /* @__PURE__ */ user_derived(() => !get(At) && u() && Ue() && it() === "right"), qt = `pie-legend-${n}`, Zt = () => {
 		if (typeof ot() == "function") {
 			ot()();
 			return;
 		}
-		set(pt, !get(pt));
-	}, qt = /* @__PURE__ */ user_derived(() => i().map((e, t) => ({
+		set(mt, !get(mt));
+	}, Qt = /* @__PURE__ */ user_derived(() => i().map((e, t) => ({
 		label: e.label,
 		color: e.color ?? getColor(t)
-	}))), Zt = /* @__PURE__ */ user_derived(() => {
+	}))), $t = /* @__PURE__ */ user_derived(() => {
 		let e = new SvelteMap();
-		if (!s() && !c() || get(ht) <= 0) return e;
-		let t = { size: get(mt) ? readCssVarPx(get(mt), "--piechart-label-font-size", 12) : 12 }, n = measureText("Ag", t).height, i = [];
-		for (let e of get(Pt)) {
+		if (!s() && !c() || get(gt) <= 0) return e;
+		let t = { size: get(ht) ? readCssVarPx(get(ht), "--piechart-label-font-size", 12) : 12 }, n = measureText("Ag", t).height, i = [];
+		for (let e of get(Lt)) {
 			let a = [];
-			s() && a.push(e.label), c() && a.push(get(Dt)(e.value));
+			s() && a.push(e.label), c() && a.push(get(Ot)(e.value));
 			let o = a.join(" ").trim();
 			if (o.length === 0) continue;
-			let u = get(At) + e.labelX, f = get(jt) + e.labelY, p = Math.max(0, Math.min(u, get(ht) - u) * 2 - 8), h = l() === "outside" ? get(Mt) : (get(Nt) + get(Mt)) / 2, S = (e.endAngle - e.startAngle) * h;
+			let u = get(Mt) + e.labelX, f = get(Nt) + e.labelY, p = Math.max(0, Math.min(u, get(gt) - u) * 2 - 8), h = l() === "outside" ? get(Pt) : (get(It) + get(Pt)) / 2, S = (e.endAngle - e.startAngle) * h;
 			if (l() === "inside" && S < n) continue;
 			let C = truncateToWidth(o, p, t);
 			if (C === "") continue;
@@ -34268,73 +34912,73 @@ function PieChart(e, t) {
 		return a.forEach((t, n) => {
 			o[n] && e.set(t.index, t.text);
 		}), e;
-	}), Qt = /* @__PURE__ */ user_derived(() => get(Nt) > 0 ? Math.max(0, get(Nt) * 1.9) : 0), $t = /* @__PURE__ */ user_derived(() => -get(Qt) / 2);
-	function en(e) {
-		return get(Pt).find((t) => t.index === e) ?? null;
+	}), en = /* @__PURE__ */ user_derived(() => get(It) > 0 ? Math.max(0, get(It) * 1.9) : 0), tn = /* @__PURE__ */ user_derived(() => -get(en) / 2);
+	function nn(e) {
+		return get(Lt).find((t) => t.index === e) ?? null;
 	}
-	let tn = /* @__PURE__ */ user_derived(() => {
-		if (get(Ct) === null || !get(Pt)[get(Ct)]) return null;
-		let e = get(Pt)[get(Ct)];
+	let rn = /* @__PURE__ */ user_derived(() => {
+		if (get(wt) === null || !get(Lt)[get(wt)]) return null;
+		let e = get(Lt)[get(wt)];
 		return {
 			title: e.label,
 			items: [{
 				label: e.label,
-				value: `${get(Tt)(e.value)} (${get(Dt)(e.value)})`,
+				value: `${get(Et)(e.value)} (${get(Ot)(e.value)})`,
 				color: e.color
 			}]
 		};
-	}), nn = /* @__PURE__ */ user_derived(() => {
-		if (get(Ct) === null) return null;
-		let e = en(get(Ct));
+	}), an = /* @__PURE__ */ user_derived(() => {
+		if (get(wt) === null) return null;
+		let e = nn(get(wt));
 		if (e === null) return null;
-		let t = (get(Nt) + get(Mt)) / 2;
+		let t = (get(It) + get(Pt)) / 2;
 		return {
-			x: get(At) + t * Math.cos(e.midAngle),
-			y: get(jt) + t * Math.sin(e.midAngle),
+			x: get(Mt) + t * Math.cos(e.midAngle),
+			y: get(Nt) + t * Math.sin(e.midAngle),
 			side: Math.sin(e.midAngle) <= 0 ? "top" : "bottom"
 		};
-	}), rn = `pie-status-${n}`, an = /* @__PURE__ */ user_derived(() => {
-		if (get(wt) === null) return "";
-		let e = en(get(wt));
-		return e === null ? "" : `${e.label}: ${get(Tt)(e.value)} (${get(Dt)(e.value)})`;
+	}), on = `pie-status-${n}`, sn = /* @__PURE__ */ user_derived(() => {
+		if (get(Tt) === null) return "";
+		let e = nn(get(Tt));
+		return e === null ? "" : `${e.label}: ${get(Et)(e.value)} (${get(Ot)(e.value)})`;
 	});
-	function on(e) {
-		let t = pointerPositionIn(get(mt), e);
-		t !== null && (set(bt, t.x, !0), set(xt, t.y, !0));
+	function cn(e) {
+		let t = pointerPositionIn(get(ht), e);
+		t !== null && (set(xt, t.x, !0), set(St, t.y, !0));
 	}
-	let sn = null;
-	function cn() {
-		let e = get(Ct);
-		e !== sn && (sn = e, re()?.(e === null ? null : {
+	let ln = null;
+	function un() {
+		let e = get(wt);
+		e !== ln && (ln = e, re()?.(e === null ? null : {
 			index: e,
 			slice: i()[e]
 		}));
 	}
-	function ln(e, t) {
-		set(_t, t, !0), on(e), cn();
-	}
-	function un(e) {
-		set(_t, e, !0), cn();
-	}
-	function dn() {
-		set(_t, null), cn();
+	function dn(e, t) {
+		set(vt, t, !0), cn(e), un();
 	}
 	function fn(e) {
-		set(vt, e, !0), cn();
+		set(vt, e, !0), un();
 	}
 	function pn() {
-		set(vt, null), cn();
+		set(vt, null), un();
+	}
+	function mn(e) {
+		set(yt, e, !0), un();
 	}
-	function mn(e, t) {
+	function hn() {
+		set(yt, null), un();
+	}
+	function gn(e, t) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), ne()?.({
 			index: t,
 			slice: i()[t]
 		}));
 	}
 	user_effect(() => {
-		if (get(_t) !== null) return dismissOnOutsidePointerDown(get(mt), dn);
+		if (get(vt) !== null) return dismissOnOutsidePointerDown(get(ht), pn);
 	});
-	var hn = {
+	var _n = {
 		get data() {
 			return i();
 		},
@@ -34485,48 +35129,54 @@ function PieChart(e, t) {
 		set onlegendmore(e) {
 			ot(e), flushSync();
 		},
-		get percentDecimals() {
+		get animateLegendValues() {
 			return ct();
 		},
-		set percentDecimals(e = 0) {
+		set animateLegendValues(e = !1) {
 			ct(e), flushSync();
 		},
-		get onchartready() {
+		get percentDecimals() {
 			return lt();
 		},
-		set onchartready(e) {
+		set percentDecimals(e = 0) {
 			lt(e), flushSync();
 		},
-		get highlightedIndex() {
+		get onchartready() {
 			return ut();
 		},
-		set highlightedIndex(e = null) {
+		set onchartready(e) {
 			ut(e), flushSync();
 		},
-		get changePercentage() {
+		get highlightedIndex() {
 			return dt();
 		},
-		set changePercentage(e) {
+		set highlightedIndex(e = null) {
 			dt(e), flushSync();
 		},
-		get changeInvertColors() {
+		get changePercentage() {
 			return ft();
 		},
-		set changeInvertColors(e = !1) {
+		set changePercentage(e) {
 			ft(e), flushSync();
+		},
+		get changeInvertColors() {
+			return pt();
+		},
+		set changeInvertColors(e = !1) {
+			pt(e), flushSync();
 		}
-	}, gn = root_12$7();
-	let _n;
-	var vn = child(gn), yn = (e) => {
+	}, vn = root_12$7();
+	let yn;
+	var bn = child(vn), xn = (e) => {
 		var t = root$31();
 		snippet(child(t), te), reset(t), append(e, t);
-	}, bn = (e) => {
+	}, Sn = (e) => {
 		var t = root_11$8(), n = first_child(t), a = child(n, !0);
 		reset(n);
 		var o = sibling(n, 2), s = (e) => {
 			Legend(e, {
 				get items() {
-					return get(qt);
+					return get(Qt);
 				},
 				position: "top",
 				customSnippet: (e, t = noop) => {
@@ -34537,8 +35187,8 @@ function PieChart(e, t) {
 						set_attribute(a, "data-pw", `pie-legend-sync-${n}`), set_attribute(a, "testid", `pie-legend-sync-${n}`);
 						var s = child(a), c = sibling(s, 2), l = child(c, !0);
 						reset(c), reset(a), template_effect(() => {
-							o = set_class(a, 1, "legend-item pie-legend-sync-item svelte-1478ug", null, o, { "legend-sync-active": get(wt) === n }), set_style(s, `background: ${get(t).color ?? ""}`), set_text(l, get(t).label);
-						}), event("pointerenter", a, () => un(n)), event("pointerleave", a, dn), event("focus", a, () => fn(n)), event("blur", a, pn), delegated("click", a, () => ne()?.({
+							o = set_class(a, 1, "legend-item pie-legend-sync-item svelte-1478ug", null, o, { "legend-sync-active": get(Tt) === n }), set_style(s, `background: ${get(t).color ?? ""}`), set_text(l, get(t).label);
+						}), event("pointerenter", a, () => fn(n)), event("pointerleave", a, pn), event("focus", a, () => mn(n)), event("blur", a, hn), delegated("click", a, () => ne()?.({
 							index: n,
 							slice: i()[n]
 						})), append(e, a);
@@ -34553,7 +35203,7 @@ function PieChart(e, t) {
 		var c = sibling(o, 2);
 		ChartContainer(c, {
 			get aspectRatio() {
-				return get(kt);
+				return get(jt);
 			},
 			get maxHeight() {
 				return h();
@@ -34562,20 +35212,20 @@ function PieChart(e, t) {
 				return S();
 			},
 			get width() {
-				return get(ht);
+				return get(gt);
 			},
 			set width(e) {
-				set(ht, e, !0);
+				set(gt, e, !0);
 			},
 			get height() {
-				return get(gt);
+				return get(_t);
 			},
 			set height(e) {
-				set(gt, e, !0);
+				set(_t, e, !0);
 			},
 			children: (e, t) => {
 				var n = root_6$18(), a = child(n);
-				each(a, 17, () => get(Pt), (e) => e.index, (e, t) => {
+				each(a, 17, () => get(Lt), (e) => e.index, (e, t) => {
 					var n = root_4$19(), a = first_child(n);
 					let o;
 					var s = sibling(a), c = (e) => {
@@ -34584,16 +35234,16 @@ function PieChart(e, t) {
 						var a = child(n, !0);
 						reset(n), template_effect((e) => {
 							i = set_class(n, 0, "slice-label svelte-1478ug", null, i, { "label-outside": l() === "outside" }), set_attribute(n, "x", get(t).labelX), set_attribute(n, "y", get(t).labelY), set_text(a, e);
-						}, [() => get(Zt).get(get(t).index)]), append(e, n);
-					}, u = /* @__PURE__ */ user_derived(() => get(Zt).has(get(t).index));
+						}, [() => get($t).get(get(t).index)]), append(e, n);
+					}, u = /* @__PURE__ */ user_derived(() => get($t).has(get(t).index));
 					if_block(s, (e) => {
 						get(u) && e(c);
 					}), template_effect((e) => {
 						o = set_class(a, 0, "slice svelte-1478ug", null, o, {
-							hovered: get(wt) === get(t).index,
-							dimmed: get(wt) !== null && get(wt) !== get(t).index
-						}), set_attribute(a, "d", get(t).path), set_attribute(a, "fill", get(t).color), set_attribute(a, "aria-label", `${get(t).label ?? ""}: ${e ?? ""}`), set_attribute(a, "aria-describedby", rn);
-					}, [() => get(Tt)(get(t).value)]), event("mouseenter", a, (e) => ln(e, get(t).index)), delegated("mousemove", a, on), event("mouseleave", a, dn), event("focus", a, () => fn(get(t).index)), event("blur", a, pn), delegated("keydown", a, (e) => mn(e, get(t).index)), delegated("click", a, () => ne()?.({
+							hovered: get(Tt) === get(t).index,
+							dimmed: get(Tt) !== null && get(Tt) !== get(t).index
+						}), set_attribute(a, "d", get(t).path), set_attribute(a, "fill", get(t).color), set_attribute(a, "aria-label", `${get(t).label ?? ""}: ${e ?? ""}`), set_attribute(a, "aria-describedby", on);
+					}, [() => get(Et)(get(t).value)]), event("mouseenter", a, (e) => dn(e, get(t).index)), delegated("mousemove", a, cn), event("mouseleave", a, pn), event("focus", a, () => mn(get(t).index)), event("blur", a, hn), delegated("keydown", a, (e) => gn(e, get(t).index)), delegated("click", a, () => ne()?.({
 						index: get(t).index,
 						slice: i()[get(t).index]
 					})), append(e, n);
@@ -34601,12 +35251,12 @@ function PieChart(e, t) {
 				var o = sibling(a), s = (e) => {
 					var t = root_5$18(), n = child(t);
 					snippet(child(n), R), reset(n), reset(t), template_effect(() => {
-						set_attribute(t, "x", -get(Qt) / 2), set_attribute(t, "y", get($t)), set_attribute(t, "width", get(Qt)), set_attribute(t, "height", get(Qt));
+						set_attribute(t, "x", -get(en) / 2), set_attribute(t, "y", get(tn)), set_attribute(t, "width", get(en)), set_attribute(t, "height", get(en));
 					}), append(e, t);
 				};
 				if_block(o, (e) => {
-					get(Nt) > 0 && typeof R() == "function" && get(Qt) > 0 && e(s);
-				}), reset(n), template_effect(() => set_attribute(n, "transform", `translate(${get(At) ?? ""}, ${get(jt) ?? ""})`)), append(e, n);
+					get(It) > 0 && typeof R() == "function" && get(en) > 0 && e(s);
+				}), reset(n), template_effect(() => set_attribute(n, "transform", `translate(${get(Mt) ?? ""}, ${get(Nt) ?? ""})`)), append(e, n);
 			},
 			$$slots: { default: !0 }
 		});
@@ -34614,45 +35264,53 @@ function PieChart(e, t) {
 			var t = root_7$16();
 			DeltaIndicator(child(t), {
 				get value() {
-					return dt();
+					return ft();
 				},
 				get invertColors() {
-					return ft();
+					return pt();
 				}
 			}), reset(t), append(e, t);
 		};
 		if_block(f, (e) => {
-			typeof dt() == "number" && e(p);
+			typeof ft() == "number" && e(p);
 		});
 		var C = sibling(f, 2), te = (e) => {
 			var t = root_10$10(), n = child(t);
-			each(n, 21, () => get(zt), index, (e, t, n) => {
+			each(n, 21, () => get(Ht), index, (e, t, n) => {
 				var i = root_8$14(), a = child(i), o = sibling(a, 2), s = child(o, !0);
 				reset(o);
-				var c = sibling(o, 2), l = child(c);
-				reset(c), reset(i), template_effect((e, n, i) => {
-					set_style(a, `background: ${e ?? ""}`), set_text(s, get(t).label), set_text(l, `${n ?? ""} ${i ?? ""}`);
-				}, [
-					() => get(t).color ?? getColor(n),
-					() => get(Tt)(pieSliceValue(get(t).value)),
-					() => get(Dt)(pieSliceValue(get(t).value))
-				]), append(e, i);
+				var c = sibling(o, 2), l = child(c), u = (e) => {
+					{
+						let n = /* @__PURE__ */ user_derived(() => get(kt)(pieSliceValue(get(t).value)));
+						AnimatedNumber(e, { get value() {
+							return get(n);
+						} });
+					}
+				}, f = (e) => {
+					var n = text();
+					template_effect((e, t) => set_text(n, `${e ?? ""} ${t ?? ""}`), [() => get(Et)(pieSliceValue(get(t).value)), () => get(Ot)(pieSliceValue(get(t).value))]), append(e, n);
+				};
+				if_block(l, (e) => {
+					ct() ? e(u) : e(f, -1);
+				}), reset(c), reset(i), template_effect((e) => {
+					set_style(a, `background: ${e ?? ""}`), set_text(s, get(t).label);
+				}, [() => get(t).color ?? getColor(n)]), append(e, i);
 			}), reset(n);
 			var i = sibling(n, 2), a = (e) => {
 				var t = root_9$11();
 				attribute_effect(t, () => ({
 					type: "button",
 					class: "pie-legend-more",
-					"aria-expanded": typeof ot() == "function" ? null : get(pt),
-					...typeof ot() == "function" ? {} : { "aria-controls": Ht },
-					onclick: Gt
+					"aria-expanded": typeof ot() == "function" ? null : get(mt),
+					...typeof ot() == "function" ? {} : { "aria-controls": qt },
+					onclick: Zt
 				}), void 0, void 0, void 0, "svelte-1478ug");
 				var n = child(t, !0);
-				reset(t), template_effect(() => set_text(n, get(pt) ? "Show less" : `+${get(Rt)} more`)), append(e, t);
+				reset(t), template_effect(() => set_text(n, get(mt) ? "Show less" : `+${get(Bt)} more`)), append(e, t);
 			};
 			if_block(i, (e) => {
-				get(Rt) > 0 && e(a);
-			}), reset(t), template_effect(() => set_attribute(n, "id", Ht)), append(e, t);
+				get(Bt) > 0 && e(a);
+			}), reset(t), template_effect(() => set_attribute(n, "id", qt)), append(e, t);
 		};
 		if_block(C, (e) => {
 			u() && Ue() && e(te);
@@ -34660,31 +35318,31 @@ function PieChart(e, t) {
 		var re = sibling(C, 2), G = (e) => {
 			ChartTooltip(e, {
 				get data() {
-					return get(tn);
+					return get(rn);
 				},
 				get mouseX() {
-					return get(bt);
+					return get(xt);
 				},
 				get mouseY() {
-					return get(xt);
+					return get(St);
 				},
 				get anchor() {
-					return get(nn);
+					return get(an);
 				},
 				get portal() {
 					return Me();
 				},
 				get originEl() {
-					return get(mt);
+					return get(ht);
 				},
 				unstyled: !0,
 				content: (e) => {
 					var t = comment(), n = first_child(t), a = (e) => {
 						var t = comment();
-						snippet(first_child(t), k, () => i()[get(Ct)], () => get(Ct)), append(e, t);
+						snippet(first_child(t), k, () => i()[get(wt)], () => get(wt)), append(e, t);
 					};
 					if_block(n, (e) => {
-						get(Ct) !== null && i()[get(Ct)] && e(a);
+						get(wt) !== null && i()[get(wt)] && e(a);
 					}), append(e, t);
 				},
 				$$slots: { content: !0 }
@@ -34692,36 +35350,36 @@ function PieChart(e, t) {
 		}, be = (e) => {
 			ChartTooltip(e, {
 				get data() {
-					return get(tn);
+					return get(rn);
 				},
 				get mouseX() {
-					return get(bt);
+					return get(xt);
 				},
 				get mouseY() {
-					return get(xt);
+					return get(St);
 				},
 				get anchor() {
-					return get(nn);
+					return get(an);
 				},
 				get portal() {
 					return Me();
 				},
 				get originEl() {
-					return get(mt);
+					return get(ht);
 				}
 			});
 		};
 		if_block(re, (e) => {
 			typeof k() == "function" ? e(G) : e(be, -1);
 		}), template_effect(() => {
-			set_attribute(n, "id", rn), set_text(a, get(an));
+			set_attribute(n, "id", on), set_text(a, get(sn));
 		}), append(e, t);
 	};
-	return if_block(vn, (e) => {
-		get(Ot) && typeof te() == "function" ? e(yn) : e(bn, -1);
-	}), reset(gn), bind_this(gn, (e) => set(mt, e), () => get(mt)), template_effect(() => {
-		_n = set_class(gn, 1, `pie-chart ${be() ?? "" ?? ""}`, "svelte-1478ug", _n, { "legend-right": get(Bt) }), set_attribute(gn, "data-pw", typeof G() == "string" ? G() : null), set_attribute(gn, "testid", typeof G() == "string" ? G() : null);
-	}), append(e, gn), pop(hn);
+	return if_block(bn, (e) => {
+		get(At) && typeof te() == "function" ? e(xn) : e(Sn, -1);
+	}), reset(vn), bind_this(vn, (e) => set(ht, e), () => get(ht)), template_effect(() => {
+		yn = set_class(vn, 1, `pie-chart ${be() ?? "" ?? ""}`, "svelte-1478ug", yn, { "legend-right": get(Gt) }), set_attribute(vn, "data-pw", typeof G() == "string" ? G() : null), set_attribute(vn, "testid", typeof G() == "string" ? G() : null);
+	}), append(e, vn), pop(_n);
 }
 delegate([
 	"click",
@@ -34753,6 +35411,7 @@ delegate([
 	legendPosition: {},
 	legendMaxItems: {},
 	onlegendmore: {},
+	animateLegendValues: {},
 	percentDecimals: {},
 	onchartready: {},
 	highlightedIndex: {},
@@ -34869,6 +35528,10 @@ customElements.define("sui-pie-chart", create_custom_element(PieChart_wc, {
 		attribute: "legend-max-items",
 		type: "Number"
 	},
+	animateLegendValues: {
+		attribute: "animate-legend-values",
+		type: "Boolean"
+	},
 	percentDecimals: {
 		attribute: "percent-decimals",
 		type: "Number"
@@ -41121,18 +41784,18 @@ customElements.define("sui-media-player", create_custom_element(MediaPlayer_wc,
 ], [], { mode: "open" }));
 //#endregion
 //#region src/lib/assets/add.svg?raw
-var add_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n  <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n</svg>\n", file_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M14 3v5h5\" />\n  <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z\" />\n</svg>\n", root$21 = /* @__PURE__ */ from_html("<div class=\"label svelte-nabf7u\"> </div>"), root_1$19 = /* @__PURE__ */ from_html("<div class=\"counter svelte-nabf7u\"> </div>"), root_2$12 = /* @__PURE__ */ from_html("<div class=\"header svelte-nabf7u\"><!> <!></div>"), root_3$11 = /* @__PURE__ */ from_html("<div class=\"description svelte-nabf7u\"> </div>"), root_4$10 = /* @__PURE__ */ from_html("<span class=\"thumb svelte-nabf7u\"><!></span>"), root_5$9 = /* @__PURE__ */ from_html("<span class=\"thumb-loading svelte-nabf7u\"><!></span>"), root_6$9 = /* @__PURE__ */ from_html("<div class=\"file-icon svelte-nabf7u\"><!></div>"), root_7$8 = /* @__PURE__ */ from_html("<span class=\"meta-name svelte-nabf7u\"> </span>"), root_8$7 = /* @__PURE__ */ from_html("<span class=\"meta-size svelte-nabf7u\"> </span>"), root_9$6 = /* @__PURE__ */ from_html("<div class=\"meta svelte-nabf7u\"><!> <!></div>"), root_10$5 = /* @__PURE__ */ from_html("<div class=\"remove svelte-nabf7u\"><!></div>"), root_11$3 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_12$3 = /* @__PURE__ */ from_html("<span class=\"drop-text svelte-nabf7u\"> </span>"), root_13$2 = /* @__PURE__ */ from_html("<span class=\"drop-hint svelte-nabf7u\"> </span>"), root_14$2 = /* @__PURE__ */ from_html("<label><span class=\"drop-icon svelte-nabf7u\"><!></span> <!> <!> <input type=\"file\" class=\"file-input\" hidden=\"\"/></label>"), root_15$2 = /* @__PURE__ */ from_html("<div class=\"error svelte-nabf7u\" role=\"alert\"> </div>"), root_16$1 = /* @__PURE__ */ from_html("<div><!> <!> <div class=\"grid svelte-nabf7u\"><!> <!></div> <!></div>"), $$css$45 = {
+var add_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n  <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n</svg>\n", file_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M14 3v5h5\" />\n  <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z\" />\n</svg>\n", root$21 = /* @__PURE__ */ from_html("<div class=\"label svelte-nabf7u\"> </div>"), root_1$19 = /* @__PURE__ */ from_html("<div class=\"counter svelte-nabf7u\"><!></div>"), root_2$12 = /* @__PURE__ */ from_html("<div class=\"counter svelte-nabf7u\"> </div>"), root_3$11 = /* @__PURE__ */ from_html("<div class=\"header svelte-nabf7u\"><!> <!></div>"), root_4$10 = /* @__PURE__ */ from_html("<div class=\"description svelte-nabf7u\"> </div>"), root_5$9 = /* @__PURE__ */ from_html("<span class=\"thumb svelte-nabf7u\"><!></span>"), root_6$9 = /* @__PURE__ */ from_html("<span class=\"thumb-loading svelte-nabf7u\"><!></span>"), root_7$8 = /* @__PURE__ */ from_html("<div class=\"file-icon svelte-nabf7u\"><!></div>"), root_8$7 = /* @__PURE__ */ from_html("<span class=\"meta-name svelte-nabf7u\"> </span>"), root_9$6 = /* @__PURE__ */ from_html("<span class=\"meta-size svelte-nabf7u\"> </span>"), root_10$5 = /* @__PURE__ */ from_html("<div class=\"meta svelte-nabf7u\"><!> <!></div>"), root_11$3 = /* @__PURE__ */ from_html("<div class=\"remove svelte-nabf7u\"><!></div>"), root_12$3 = /* @__PURE__ */ from_html("<div><!> <!> <!></div>"), root_13$2 = /* @__PURE__ */ from_html("<span class=\"drop-text svelte-nabf7u\"> </span>"), root_14$2 = /* @__PURE__ */ from_html("<span class=\"drop-hint svelte-nabf7u\"> </span>"), root_15$2 = /* @__PURE__ */ from_html("<label><span class=\"drop-icon svelte-nabf7u\"><!></span> <!> <!> <input type=\"file\" class=\"file-input\" hidden=\"\"/></label>"), root_16$1 = /* @__PURE__ */ from_html("<div class=\"error svelte-nabf7u\" role=\"alert\"> </div>"), root_17$1 = /* @__PURE__ */ from_html("<div><!> <!> <div class=\"grid svelte-nabf7u\"><!> <!></div> <!></div>"), $$css$45 = {
 	hash: "svelte-nabf7u",
 	code: ".media-upload.svelte-nabf7u {box-sizing:border-box;display:flex;flex-direction:column;width:var(--media-upload-width, fit-content);font-family:var(--media-upload-font-family, inherit);color:var(--media-upload-color, inherit);}.media-upload.disabled.svelte-nabf7u {opacity:var(--media-upload-disabled-opacity, 0.55);}.header.svelte-nabf7u {display:flex;align-items:baseline;justify-content:space-between;gap:var(--media-upload-header-gap, 12px);margin:var(--media-upload-label-margin, 0 0 4px 0);}.label.svelte-nabf7u {font-size:var(--media-upload-label-font-size, 14px);font-weight:var(--media-upload-label-font-weight, 600);color:var(--media-upload-label-color, #242833);}.counter.svelte-nabf7u {font-size:var(--media-upload-counter-font-size, 12px);font-weight:var(--media-upload-counter-font-weight, 500);color:var(--media-upload-counter-color, #5a5a5a);font-variant-numeric:tabular-nums;}.description.svelte-nabf7u {font-size:var(--media-upload-description-font-size, 12px);color:var(--media-upload-description-color, #656565);margin:var(--media-upload-description-margin, 0);}.grid.svelte-nabf7u {display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--media-upload-gap, 12px);margin:var(--media-upload-content-margin, 12px 0 0 0);}.card.svelte-nabf7u,\n  .drop-tile.svelte-nabf7u {box-sizing:border-box;height:var(--media-upload-item-height, 110px);width:var(--media-upload-item-width, 110px);border-radius:var(--media-upload-item-border-radius, 14px);}.card.svelte-nabf7u {position:relative;overflow:hidden;border:var(--media-upload-item-border, 1px solid #e4e4e7);background-color:var(--media-upload-item-background-color, #fafafa);box-shadow:var(--media-upload-item-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));transition:var(--media-upload-item-transition, box-shadow 0.2s ease, transform 0.2s ease);}.card.svelte-nabf7u:hover {box-shadow:var(--media-upload-item-hover-box-shadow, 0 6px 18px rgba(0, 0, 0, 0.14));transform:var(--media-upload-item-hover-transform, translateY(-2px));}.thumb.svelte-nabf7u {display:contents;--image-width: 100%;--image-height: 100%;--image-object-fit: var(--media-upload-item-object-fit, cover);--image-border-radius: 0px;--image-padding: 0px;--image-margin: 0px;}.thumb-loading.svelte-nabf7u {display:contents;--shimmer-width: 100%;--shimmer-height: 100%;--shimmer-border-radius: 0px;}.file-icon.svelte-nabf7u {display:flex;height:100%;width:100%;justify-content:center;align-items:center;color:var(--media-upload-file-icon-color, #8a8f98);}.file-icon.svelte-nabf7u svg,\n  .file-icon.svelte-nabf7u img {height:var(--media-upload-file-icon-size, 36px);width:var(--media-upload-file-icon-size, 36px);object-fit:contain;}.meta.svelte-nabf7u {position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;padding:var(--media-upload-meta-padding, 6px 8px);background:var(\n      --media-upload-meta-background,\n      linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0))\n    );color:var(--media-upload-meta-color, #ffffff);}.is-file.svelte-nabf7u .meta:where(.svelte-nabf7u) {background:var(--media-upload-file-meta-background, transparent);color:var(--media-upload-file-meta-color, #52525b);}.meta-name.svelte-nabf7u {font-size:var(--media-upload-meta-name-font-size, 11px);font-weight:var(--media-upload-meta-name-font-weight, 500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.meta-size.svelte-nabf7u {font-size:var(--media-upload-meta-size-font-size, 10px);opacity:var(--media-upload-meta-size-opacity, 0.85);font-variant-numeric:tabular-nums;}.remove.svelte-nabf7u {position:absolute;top:var(--media-upload-remove-inset, 6px);right:var(--media-upload-remove-inset, 6px);opacity:var(--media-upload-remove-opacity, 0);transition:var(--media-upload-remove-transition, opacity 0.18s ease);--button-width: var(--media-upload-remove-size, 24px);--button-height: var(--media-upload-remove-size, 24px);--button-padding: var(--media-upload-remove-padding, 4px);--button-border: var(--media-upload-remove-border, none);--button-border-radius: var(--media-upload-remove-border-radius, 50%);--button-color: var(--media-upload-remove-background-color, rgba(0, 0, 0, 0.55));--button-text-color: var(--media-upload-remove-color, #ffffff);--button-content-gap: 0px;--button-hover-color: var(--media-upload-remove-hover-background-color, rgba(0, 0, 0, 0.78));--button-hover-text-color: var(\n      --media-upload-remove-hover-color,\n      var(--media-upload-remove-color, #ffffff)\n    );}.card.svelte-nabf7u:hover .remove:where(.svelte-nabf7u),\n  .remove.svelte-nabf7u:focus-within {opacity:1;}.remove.svelte-nabf7u svg,\n  .remove.svelte-nabf7u img {height:var(--media-upload-remove-icon-size, 100%);width:var(--media-upload-remove-icon-size, 100%);object-fit:contain;}.drop-tile.svelte-nabf7u {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--media-upload-add-gap, 6px);box-sizing:border-box;padding:var(--media-upload-add-padding, 12px);text-align:center;background-color:var(--media-upload-add-background-color, #fafafa);border:var(--media-upload-add-border, 1.5px dashed #c8ccd2);color:var(--media-upload-add-color, #4b5563);cursor:pointer;transition:var(\n      --media-upload-add-transition,\n      border-color 0.18s ease,\n      background-color 0.18s ease,\n      color 0.18s ease\n    );}.drop-tile.svelte-nabf7u:hover {background-color:var(--media-upload-add-hover-background-color, #f1f5ff);border:var(--media-upload-add-hover-border, 1.5px dashed #6d8eff);color:var(--media-upload-add-hover-color, #3b5bdb);}.drop-tile.dragging.svelte-nabf7u {background-color:var(--media-upload-add-dragging-background-color, #e7efff);border:var(--media-upload-add-dragging-border, 1.5px solid #3b5bdb);color:var(--media-upload-add-dragging-color, #3b5bdb);}.drop-icon.svelte-nabf7u {display:flex;justify-content:center;align-items:center;}.drop-icon.svelte-nabf7u svg,\n  .drop-icon.svelte-nabf7u img {height:var(--media-upload-add-icon-size, 22px);width:var(--media-upload-add-icon-size, 22px);object-fit:contain;}.drop-text.svelte-nabf7u {font-size:var(--media-upload-add-text-font-size, 11px);line-height:var(--media-upload-add-text-line-height, 1.3);}.drop-hint.svelte-nabf7u {font-size:var(--media-upload-add-hint-font-size, 10px);color:var(--media-upload-add-hint-color, #4b5563);}.error.svelte-nabf7u {font-size:var(--media-upload-error-font-size, 12px);color:var(--media-upload-error-color, #e0334b);margin:var(--media-upload-error-margin, 8px 0 0 0);}\n\n  /* `--media-upload-item-transition` defaults to a box-shadow AND transform lift\n     on hover. The shadow alone would be fine; the transform is movement, and a\n     consumer overriding the token is most likely adding more of it. Dropping the\n     whole declaration is right here because every end state is a resting state. */\n  @media (prefers-reduced-motion: reduce) {.media-item.svelte-nabf7u {transition:none;}\n  }"
 };
 function MediaUpload(e, t) {
 	let n = props_id();
 	push(t, !0), append_styles$1(e, $$css$45);
-	let i = prop(t, "label", 7), a = prop(t, "description", 7), o = prop(t, "addText", 7), s = prop(t, "hintText", 7), c = prop(t, "maxLength", 7, 3), l = prop(t, "accept", 7, "image/*"), u = prop(t, "maxFileSize", 7, 0), f = prop(t, "multiple", 7, !1), p = prop(t, "dragAndDrop", 7, !0), h = prop(t, "disabled", 7, !1), S = prop(t, "showCounter", 7, !0), C = prop(t, "showFileName", 7, !0), k = prop(t, "showFileSize", 7, !0), R = prop(t, "addIcon", 7), te = prop(t, "removeIcon", 7), ne = prop(t, "fileIcon", 7), re = prop(t, "errorMessages", 7), G = prop(t, "files", 31, () => proxy([])), be = prop(t, "onchange", 7), Me = prop(t, "onremove", 7), Re = prop(t, "onerror", 7), Ue = prop(t, "testId", 7), it = prop(t, "classes", 7), at = /* @__PURE__ */ state(proxy([])), ot = /* @__PURE__ */ state(""), ct = /* @__PURE__ */ state(!1), lt = /* @__PURE__ */ user_derived(() => get(at).length >= c()), ut = /* @__PURE__ */ user_derived(() => !get(lt) && !h());
-	function dt() {
-		G(get(at).map((e) => e.file)), be()?.(G());
+	let i = prop(t, "label", 7), a = prop(t, "description", 7), o = prop(t, "addText", 7), s = prop(t, "hintText", 7), c = prop(t, "maxLength", 7, 3), l = prop(t, "accept", 7, "image/*"), u = prop(t, "maxFileSize", 7, 0), f = prop(t, "multiple", 7, !1), p = prop(t, "dragAndDrop", 7, !0), h = prop(t, "disabled", 7, !1), S = prop(t, "showCounter", 7, !0), C = prop(t, "showFileName", 7, !0), k = prop(t, "showFileSize", 7, !0), R = prop(t, "addIcon", 7), te = prop(t, "removeIcon", 7), ne = prop(t, "fileIcon", 7), re = prop(t, "errorMessages", 7), G = prop(t, "files", 31, () => proxy([])), be = prop(t, "animateCounter", 7, !1), Me = prop(t, "onchange", 7), Re = prop(t, "onremove", 7), Ue = prop(t, "onerror", 7), it = prop(t, "testId", 7), at = prop(t, "classes", 7), ot = /* @__PURE__ */ state(proxy([])), ct = /* @__PURE__ */ state(""), lt = /* @__PURE__ */ state(!1), ut = /* @__PURE__ */ user_derived(() => get(ot).length >= c()), dt = /* @__PURE__ */ user_derived(() => !get(ut) && !h());
+	function ft() {
+		G(get(ot).map((e) => e.file)), Me()?.(G());
 	}
-	function ft(e) {
+	function pt(e) {
 		if (e < 1024) return `${e} B`;
 		let t = [
 			"KB",
@@ -41142,12 +41805,12 @@ function MediaUpload(e, t) {
 		for (; n >= 1024 && i < t.length - 1;) n /= 1024, i += 1;
 		return `${n.toFixed(n >= 10 || i === 0 ? 0 : 1)} ${t.at(i) ?? ""}`;
 	}
-	function pt(e) {
+	function mt(e) {
 		if (l().length === 0 || l() === "*" || l() === "*/*") return !0;
 		let t = l().split(",").map((e) => e.trim().toLowerCase()), n = e.name.toLowerCase(), i = e.type.toLowerCase();
 		return t.some((e) => e.startsWith(".") ? n.endsWith(e) : e.endsWith("/*") ? i.startsWith(e.slice(0, -1)) : i === e);
 	}
-	function mt(e) {
+	function ht(e) {
 		let t = e.type.startsWith("image/"), n = {
 			file: e,
 			src: "",
@@ -41155,8 +41818,8 @@ function MediaUpload(e, t) {
 			size: e.size,
 			isImage: t
 		};
-		set(at, [...get(at), n], !0);
-		let i = get(at)[get(at).length - 1];
+		set(ot, [...get(ot), n], !0);
+		let i = get(ot)[get(ot).length - 1];
 		if (t) {
 			let t = new FileReader();
 			t.onload = (e) => {
@@ -41164,27 +41827,27 @@ function MediaUpload(e, t) {
 			}, t.readAsDataURL(e);
 		}
 	}
-	function ht(e) {
+	function gt(e) {
 		let t = e.at(0)?.reason;
 		if (t === "type") return re()?.type ?? "Some files were skipped — unsupported file type.";
 		if (t === "size") {
-			let e = u() > 0 ? ` (max ${ft(u())})` : "";
+			let e = u() > 0 ? ` (max ${pt(u())})` : "";
 			return re()?.size ?? `Some files were too large${e}.`;
 		}
 		return re()?.max ?? `You can attach up to ${c()} files.`;
 	}
-	function gt(e) {
+	function _t(e) {
 		if (h()) return;
 		let t = [];
 		for (let n of e) {
-			if (get(at).length >= c()) {
+			if (get(ot).length >= c()) {
 				t.push({
 					file: n,
 					reason: "max"
 				});
 				continue;
 			}
-			if (!pt(n)) {
+			if (!mt(n)) {
 				t.push({
 					file: n,
 					reason: "type"
@@ -41198,28 +41861,28 @@ function MediaUpload(e, t) {
 				});
 				continue;
 			}
-			mt(n);
+			ht(n);
 		}
-		set(ot, t.length > 0 ? ht(t) : "", !0), t.length > 0 && Re()?.(t), dt();
-	}
-	function _t(e) {
-		let t = e.currentTarget;
-		gt(Array.from(t.files ?? [])), t.value = "";
+		set(ct, t.length > 0 ? gt(t) : "", !0), t.length > 0 && Ue()?.(t), ft();
 	}
 	function vt(e) {
-		e.preventDefault(), set(ct, !1), !(h() || !p()) && gt(Array.from(e.dataTransfer?.files ?? []));
+		let t = e.currentTarget;
+		_t(Array.from(t.files ?? [])), t.value = "";
 	}
 	function yt(e) {
-		h() || !p() || (e.preventDefault(), set(ct, !0));
+		e.preventDefault(), set(lt, !1), !(h() || !p()) && _t(Array.from(e.dataTransfer?.files ?? []));
 	}
-	function bt() {
-		set(ct, !1);
+	function bt(e) {
+		h() || !p() || (e.preventDefault(), set(lt, !0));
 	}
-	function xt(e) {
-		let t = get(at).at(e);
-		set(at, get(at).filter((t, n) => n !== e), !0), set(ot, ""), dt(), typeof t == "object" && Me()?.(t.file);
+	function xt() {
+		set(lt, !1);
+	}
+	function St(e) {
+		let t = get(ot).at(e);
+		set(ot, get(ot).filter((t, n) => n !== e), !0), set(ct, ""), ft(), typeof t == "object" && Re()?.(t.file);
 	}
-	var St = {
+	var Ct = {
 		get label() {
 			return i();
 		},
@@ -41328,40 +41991,46 @@ function MediaUpload(e, t) {
 		set files(e = []) {
 			G(e), flushSync();
 		},
-		get onchange() {
+		get animateCounter() {
 			return be();
 		},
-		set onchange(e) {
+		set animateCounter(e = !1) {
 			be(e), flushSync();
 		},
-		get onremove() {
+		get onchange() {
 			return Me();
 		},
-		set onremove(e) {
+		set onchange(e) {
 			Me(e), flushSync();
 		},
-		get onerror() {
+		get onremove() {
 			return Re();
 		},
-		set onerror(e) {
+		set onremove(e) {
 			Re(e), flushSync();
 		},
-		get testId() {
+		get onerror() {
 			return Ue();
 		},
-		set testId(e) {
+		set onerror(e) {
 			Ue(e), flushSync();
 		},
-		get classes() {
+		get testId() {
 			return it();
 		},
-		set classes(e) {
+		set testId(e) {
 			it(e), flushSync();
+		},
+		get classes() {
+			return at();
+		},
+		set classes(e) {
+			at(e), flushSync();
 		}
-	}, Ct = root_16$1();
-	let wt;
-	var Tt = child(Ct), Et = (e) => {
-		var t = root_2$12(), n = child(t), a = (e) => {
+	}, wt = root_17$1();
+	let Tt;
+	var Et = child(wt), Dt = (e) => {
+		var t = root_3$11(), n = child(t), a = (e) => {
 			var t = root$21(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, i())), append(e, t);
 		};
@@ -41369,30 +42038,44 @@ function MediaUpload(e, t) {
 			typeof i() == "string" && i().length > 0 && e(a);
 		});
 		var o = sibling(n, 2), s = (e) => {
-			var t = root_1$19(), n = child(t);
-			reset(t), template_effect(() => set_text(n, `${get(at).length ?? ""} / ${c() ?? ""}`)), append(e, t);
+			var t = comment(), n = first_child(t), i = (e) => {
+				var t = root_1$19(), n = child(t);
+				{
+					let e = /* @__PURE__ */ user_derived(() => `${get(ot).length} / ${c()}`);
+					AnimatedNumber(n, { get value() {
+						return get(e);
+					} });
+				}
+				reset(t), append(e, t);
+			}, a = (e) => {
+				var t = root_2$12(), n = child(t);
+				reset(t), template_effect(() => set_text(n, `${get(ot).length ?? ""} / ${c() ?? ""}`)), append(e, t);
+			};
+			if_block(n, (e) => {
+				be() ? e(i) : e(a, -1);
+			}), append(e, t);
 		};
 		if_block(o, (e) => {
 			S() && e(s);
 		}), reset(t), append(e, t);
 	};
-	if_block(Tt, (e) => {
-		(typeof i() == "string" && i().length > 0 || S()) && e(Et);
+	if_block(Et, (e) => {
+		(typeof i() == "string" && i().length > 0 || S()) && e(Dt);
 	});
-	var Dt = sibling(Tt, 2), Ot = (e) => {
-		var t = root_3$11(), n = child(t, !0);
+	var Ot = sibling(Et, 2), kt = (e) => {
+		var t = root_4$10(), n = child(t, !0);
 		reset(t), template_effect(() => set_text(n, a())), append(e, t);
 	};
-	if_block(Dt, (e) => {
-		typeof a() == "string" && a().length > 0 && e(Ot);
+	if_block(Ot, (e) => {
+		typeof a() == "string" && a().length > 0 && e(kt);
 	});
-	var kt = sibling(Dt, 2), At = child(kt);
-	each(At, 19, () => get(at), (e, t) => e.file.name + t, (e, t, n) => {
-		var i = root_11$3();
+	var At = sibling(Ot, 2), jt = child(At);
+	each(jt, 19, () => get(ot), (e, t) => e.file.name + t, (e, t, n) => {
+		var i = root_12$3();
 		let a;
 		var o = child(i), s = (e) => {
 			var n = comment(), i = first_child(n), a = (e) => {
-				var n = root_4$10();
+				var n = root_5$9();
 				Img(child(n), {
 					get src() {
 						return get(t).src;
@@ -41402,14 +42085,14 @@ function MediaUpload(e, t) {
 					}
 				}), reset(n), append(e, n);
 			}, o = (e) => {
-				var t = root_5$9();
+				var t = root_6$9();
 				Shimmer(child(t), {}), reset(t), append(e, t);
 			};
 			if_block(i, (e) => {
 				get(t).src.length > 0 ? e(a) : e(o, -1);
 			}), append(e, n);
 		}, c = (e) => {
-			var t = root_6$9(), n = child(t), i = (e) => {
+			var t = root_7$8(), n = child(t), i = (e) => {
 				var t = comment();
 				snippet(first_child(t), ne), append(e, t);
 			}, a = (e) => {
@@ -41424,16 +42107,16 @@ function MediaUpload(e, t) {
 			get(t).isImage ? e(s) : e(c, -1);
 		});
 		var l = sibling(o, 2), u = (e) => {
-			var n = root_9$6(), i = child(n), a = (e) => {
-				var n = root_7$8(), i = child(n, !0);
+			var n = root_10$5(), i = child(n), a = (e) => {
+				var n = root_8$7(), i = child(n, !0);
 				reset(n), template_effect(() => set_text(i, get(t).name)), append(e, n);
 			};
 			if_block(i, (e) => {
 				C() && e(a);
 			});
 			var o = sibling(i, 2), s = (e) => {
-				var n = root_8$7(), i = child(n, !0);
-				reset(n), template_effect((e) => set_text(i, e), [() => ft(get(t).size)]), append(e, n);
+				var n = root_9$6(), i = child(n, !0);
+				reset(n), template_effect((e) => set_text(i, e), [() => pt(get(t).size)]), append(e, n);
 			};
 			if_block(o, (e) => {
 				k() && get(t).size > 0 && e(s);
@@ -41443,9 +42126,9 @@ function MediaUpload(e, t) {
 			(C() || k()) && (C() || get(t).size > 0) && e(u);
 		});
 		var f = sibling(l, 2), p = (e) => {
-			var i = root_10$5();
+			var i = root_11$3();
 			Button(child(i), {
-				onclick: () => xt(get(n)),
+				onclick: () => St(get(n)),
 				get ariaLabel() {
 					return `Remove ${get(t).name ?? ""}`;
 				},
@@ -41468,8 +42151,8 @@ function MediaUpload(e, t) {
 			h() || e(p);
 		}), reset(i), template_effect(() => a = set_class(i, 1, "card svelte-nabf7u", null, a, { "is-file": !get(t).isImage })), append(e, i);
 	});
-	var jt = sibling(At, 2), Mt = (e) => {
-		var t = root_14$2();
+	var Mt = sibling(jt, 2), Nt = (e) => {
+		var t = root_15$2();
 		let i;
 		var a = child(t), c = child(a), u = (e) => {
 			var t = comment();
@@ -41482,14 +42165,14 @@ function MediaUpload(e, t) {
 			typeof R() == "function" ? e(u) : e(p, -1);
 		}), reset(a);
 		var S = sibling(a, 2), C = (e) => {
-			var t = root_12$3(), n = child(t, !0);
+			var t = root_13$2(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, o())), append(e, t);
 		};
 		if_block(S, (e) => {
 			typeof o() == "string" && o().length > 0 && e(C);
 		});
 		var k = sibling(S, 2), te = (e) => {
-			var t = root_13$2(), n = child(t, !0);
+			var t = root_14$2(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, s())), append(e, t);
 		};
 		if_block(k, (e) => {
@@ -41497,21 +42180,21 @@ function MediaUpload(e, t) {
 		});
 		var ne = sibling(k, 2);
 		reset(t), template_effect(() => {
-			set_attribute(t, "for", n), i = set_class(t, 1, "drop-tile svelte-nabf7u", null, i, { dragging: get(ct) }), set_attribute(ne, "id", n), set_attribute(ne, "accept", l()), ne.multiple = f(), ne.disabled = h();
-		}), event("dragover", t, yt), event("dragleave", t, bt), event("drop", t, vt), delegated("change", ne, _t), append(e, t);
-	};
-	if_block(jt, (e) => {
-		get(ut) && e(Mt);
-	}), reset(kt);
-	var Nt = sibling(kt, 2), Pt = (e) => {
-		var t = root_15$2(), n = child(t, !0);
-		reset(t), template_effect(() => set_text(n, get(ot))), append(e, t);
+			set_attribute(t, "for", n), i = set_class(t, 1, "drop-tile svelte-nabf7u", null, i, { dragging: get(lt) }), set_attribute(ne, "id", n), set_attribute(ne, "accept", l()), ne.multiple = f(), ne.disabled = h();
+		}), event("dragover", t, bt), event("dragleave", t, xt), event("drop", t, yt), delegated("change", ne, vt), append(e, t);
 	};
-	return if_block(Nt, (e) => {
-		get(ot).length > 0 && e(Pt);
-	}), reset(Ct), template_effect(() => {
-		wt = set_class(Ct, 1, `media-upload ${it() ?? "" ?? ""}`, "svelte-nabf7u", wt, { disabled: h() }), set_attribute(Ct, "data-pw", typeof Ue() == "string" ? Ue() : null);
-	}), append(e, Ct), pop(St);
+	if_block(Mt, (e) => {
+		get(dt) && e(Nt);
+	}), reset(At);
+	var Pt = sibling(At, 2), It = (e) => {
+		var t = root_16$1(), n = child(t, !0);
+		reset(t), template_effect(() => set_text(n, get(ct))), append(e, t);
+	};
+	return if_block(Pt, (e) => {
+		get(ct).length > 0 && e(It);
+	}), reset(wt), template_effect(() => {
+		Tt = set_class(wt, 1, `media-upload ${at() ?? "" ?? ""}`, "svelte-nabf7u", Tt, { disabled: h() }), set_attribute(wt, "data-pw", typeof it() == "string" ? it() : null);
+	}), append(e, wt), pop(Ct);
 }
 delegate(["change"]), create_custom_element(MediaUpload, {
 	label: {},
@@ -41532,6 +42215,7 @@ delegate(["change"]), create_custom_element(MediaUpload, {
 	fileIcon: {},
 	errorMessages: {},
 	files: {},
+	animateCounter: {},
 	onchange: {},
 	onremove: {},
 	onerror: {},
@@ -41617,6 +42301,10 @@ customElements.define("sui-media-upload", create_custom_element(MediaUpload_wc,
 	fileIcon: { type: "Object" },
 	errorMessages: { type: "Object" },
 	files: { type: "Object" },
+	animateCounter: {
+		attribute: "animate-counter",
+		type: "Boolean"
+	},
 	testId: {
 		attribute: "test-id",
 		type: "String"
@@ -41936,7 +42624,7 @@ var edit_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.
 	}), append(e, i);
 }, root$18 = /* @__PURE__ */ from_html("<span class=\"grid-image-wrap svelte-14wkit2\"><!></span> <!>", 1), root_1$16 = /* @__PURE__ */ from_html("<span class=\"list-caption svelte-14wkit2\"> </span>"), root_2$10 = /* @__PURE__ */ from_html("<span class=\"list-text svelte-14wkit2\"><span class=\"list-title svelte-14wkit2\"> </span> <!></span>"), root_3$10 = /* @__PURE__ */ from_html("<!> <!>", 1), root_4$9 = /* @__PURE__ */ from_html("<button class=\"gallery-item-content svelte-14wkit2\"><!></button>"), root_5$8 = /* @__PURE__ */ from_html("<div class=\"gallery-item-content svelte-14wkit2\"><!></div>"), root_6$8 = /* @__PURE__ */ from_html("<div class=\"gallery-item-action svelte-14wkit2\"><!></div>"), root_7$7 = /* @__PURE__ */ from_html("<div class=\"gallery-item-actions svelte-14wkit2\"><!> <!></div>"), root_8$6 = /* @__PURE__ */ from_html("<div class=\"gallery-item svelte-14wkit2\" role=\"listitem\"><!> <!></div>"), root_9$5 = /* @__PURE__ */ from_html("<div class=\"lightbox-previous svelte-14wkit2\"><!></div>"), root_10$4 = /* @__PURE__ */ from_html("<figcaption class=\"lightbox-caption svelte-14wkit2\"> </figcaption>"), root_11$2 = /* @__PURE__ */ from_html("<figure class=\"lightbox-figure svelte-14wkit2\"><!> <!></figure>"), root_12$2 = /* @__PURE__ */ from_html("<div class=\"lightbox-next svelte-14wkit2\"><!></div>"), root_13$1 = /* @__PURE__ */ from_html("<div class=\"lightbox-counter svelte-14wkit2\" aria-live=\"polite\"> </div>"), root_14$1 = /* @__PURE__ */ from_html("<div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><div class=\"lightbox-close svelte-14wkit2\"><!></div> <!> <!> <!> <!></div>"), root_15$1 = /* @__PURE__ */ from_html("<div role=\"list\"></div> <!>", 1), $$css$39 = {
 	hash: "svelte-14wkit2",
-	code: ".gallery.svelte-14wkit2 {width:var(--gallery-width, 100%);padding:var(--gallery-padding, 0px);margin:var(--gallery-margin, 0px);background:var(--gallery-background, transparent);}.gallery.grid.svelte-14wkit2 {display:grid;grid-template-columns:var(\n      --gallery-grid-template-columns,\n      repeat(var(--gallery-columns, 3), 1fr)\n    );gap:var(--gallery-gap, 8px);}.gallery.list.svelte-14wkit2 {display:flex;flex-direction:column;gap:var(--gallery-gap, 8px);}.gallery-item.svelte-14wkit2 {position:relative;}.grid.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2) {aspect-ratio:var(--gallery-item-aspect-ratio, 1);border-radius:var(--gallery-item-border-radius, 0px);overflow:hidden;--image-width: 100%;--image-height: 100%;--image-object-fit: var(--gallery-item-image-fit, cover);--image-border-radius: var(--gallery-item-border-radius, 0px);--image-transition: var(--gallery-item-image-transition);}.grid.has-item-footer.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2) {aspect-ratio:auto;overflow:visible;border-radius:0px;}.list.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2) {display:flex;align-items:center;border-radius:var(--gallery-list-item-border-radius, 0px);background:var(--gallery-list-item-background, transparent);--image-width: var(--gallery-list-thumbnail-width, 56px);--image-height: var(--gallery-list-thumbnail-height, 56px);--image-object-fit: var(--gallery-list-thumbnail-fit, cover);--image-border-radius: var(--gallery-list-thumbnail-border-radius, 0px);--image-transition: var(--gallery-item-image-transition);--image-flex-shrink: 0;}.gallery-item-content.svelte-14wkit2 {font:inherit;color:inherit;border:var(--gallery-item-border, none);background:transparent;}button.gallery-item-content.svelte-14wkit2 {cursor:var(--gallery-item-cursor, pointer);transition:var(--gallery-item-transition);}.grid.svelte-14wkit2 .gallery-item-content:where(.svelte-14wkit2) {display:block;width:100%;height:100%;padding:0;border-radius:var(--gallery-item-border-radius, 0px);}.grid.has-item-footer.svelte-14wkit2 .gallery-item-content:where(.svelte-14wkit2) {display:flex;flex-direction:column;height:auto;border-radius:var(--gallery-item-border-radius, 0px);overflow:hidden;}.grid-image-wrap.svelte-14wkit2 {display:block;aspect-ratio:var(--gallery-item-aspect-ratio, 1);overflow:hidden;--image-width: 100%;--image-height: 100%;--image-object-fit: var(--gallery-item-image-fit, cover);--image-border-radius: 0px;--image-transition: var(--gallery-item-image-transition);}.list.svelte-14wkit2 .gallery-item-content:where(.svelte-14wkit2) {display:flex;align-items:center;text-align:left;flex:1;min-width:0;gap:var(--gallery-list-item-gap, 12px);padding:var(--gallery-list-item-padding, 8px);}.grid.svelte-14wkit2 button.gallery-item-content:where(.svelte-14wkit2):hover {opacity:var(--gallery-item-hover-opacity, 1);transform:var(--gallery-item-hover-transform);}.grid.svelte-14wkit2 button.gallery-item-content:where(.svelte-14wkit2):focus-visible {outline:var(--gallery-item-focus-outline, 2px solid currentColor);outline-offset:var(--gallery-item-focus-outline-offset, 2px);}.list.svelte-14wkit2 button.gallery-item-content:where(.svelte-14wkit2):focus-visible {outline:none;}.list.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2):has(button.gallery-item-content:where(.svelte-14wkit2)):hover {background:var(--gallery-list-item-hover-background, transparent);}.list.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2):has(button.gallery-item-content:where(.svelte-14wkit2):focus-visible) {outline:var(--gallery-item-focus-outline, 2px solid currentColor);outline-offset:var(--gallery-item-focus-outline-offset, 2px);}.list-text.svelte-14wkit2 {display:flex;flex-direction:column;gap:var(--gallery-list-text-gap, 2px);min-width:0;}.list-title.svelte-14wkit2,\n  .list-caption.svelte-14wkit2 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.list-title.svelte-14wkit2 {color:var(--gallery-list-title-color, inherit);font-size:var(--gallery-list-title-font-size, 14px);font-weight:var(--gallery-list-title-font-weight, 500);font-family:var(--gallery-list-title-font-family, inherit);}.list-caption.svelte-14wkit2 {color:var(--gallery-list-caption-color, inherit);font-size:var(--gallery-list-caption-font-size, 12px);font-family:var(--gallery-list-caption-font-family, inherit);}.gallery-item-actions.svelte-14wkit2 {display:flex;align-items:center;gap:var(--gallery-item-actions-gap, 4px);}.grid.svelte-14wkit2 .gallery-item-actions:where(.svelte-14wkit2) {position:absolute;top:var(--gallery-item-actions-top, 8px);right:var(--gallery-item-actions-right, 8px);}.list.svelte-14wkit2 .gallery-item-actions:where(.svelte-14wkit2) {flex-shrink:0;padding-right:var(--gallery-item-actions-right, 8px);}.gallery-item-action.svelte-14wkit2 {border-radius:var(--gallery-item-action-border-radius, 8px);--button-color: transparent;--button-hover-color: transparent;--button-padding: var(--gallery-item-action-padding, 6px);--button-border-radius: var(--gallery-item-action-border-radius, 8px);--icon-container-padding: 0px;--icon-padding: 0px;--icon-width: var(--gallery-item-action-icon-size, 16px);--icon-height: var(--gallery-item-action-icon-size, 16px);}.grid.svelte-14wkit2 .gallery-item-action:where(.svelte-14wkit2) {background:var(--gallery-item-action-background, #00000066);-webkit-backdrop-filter:var(--gallery-item-action-backdrop-filter, blur(8px));backdrop-filter:var(--gallery-item-action-backdrop-filter, blur(8px));--button-text-color: var(--gallery-item-action-color, #ffffff);}.grid.svelte-14wkit2 .gallery-item-action:where(.svelte-14wkit2):hover {background:var(--gallery-item-action-hover-background, #00000099);}.list.svelte-14wkit2 .gallery-item-action:where(.svelte-14wkit2) {background:var(--gallery-item-action-background, transparent);--button-text-color: var(--gallery-item-action-color, currentColor);}.list.svelte-14wkit2 .gallery-item-action:where(.svelte-14wkit2):hover {background:var(--gallery-item-action-hover-background, #80808026);}.lightbox.svelte-14wkit2 {position:fixed;top:0;bottom:0;left:0;right:0;z-index:var(--gallery-lightbox-z-index, 15);display:flex;justify-content:center;align-items:center;background:var(--gallery-lightbox-background, #000000e6);-webkit-tap-highlight-color:transparent;}.lightbox.svelte-14wkit2:focus {outline:none;}.lightbox-figure.svelte-14wkit2 {display:flex;flex-direction:column;align-items:center;gap:var(--gallery-lightbox-caption-gap, 12px);margin:0;pointer-events:none;--image-width: var(--gallery-lightbox-image-width, 85vw);--image-height: var(--gallery-lightbox-image-height, 75vh);--image-object-fit: var(--gallery-lightbox-image-fit, contain);--image-border-radius: var(--gallery-lightbox-image-border-radius, 0px);}.lightbox-caption.svelte-14wkit2 {color:var(--gallery-lightbox-caption-color, #ffffff);font-size:var(--gallery-lightbox-caption-font-size, 14px);font-family:var(--gallery-lightbox-caption-font-family, inherit);text-align:center;max-width:var(--gallery-lightbox-image-width, 85vw);}.lightbox-counter.svelte-14wkit2 {position:absolute;bottom:var(--gallery-lightbox-counter-bottom, 16px);left:50%;transform:translateX(-50%);color:var(--gallery-lightbox-counter-color, #ffffff);font-size:var(--gallery-lightbox-counter-font-size, 13px);font-family:var(--gallery-lightbox-counter-font-family, inherit);}.lightbox-close.svelte-14wkit2,\n  .lightbox-previous.svelte-14wkit2,\n  .lightbox-next.svelte-14wkit2 {position:absolute;--button-color: var(--gallery-lightbox-control-background, transparent);--button-text-color: var(--gallery-lightbox-control-color, #ffffff);--button-hover-color: var(--gallery-lightbox-control-hover-background, #ffffff1f);--button-padding: var(--gallery-lightbox-control-padding, 8px);--button-border-radius: var(--gallery-lightbox-control-border-radius, 50%);--icon-container-padding: 0px;--icon-padding: 0px;--icon-width: var(--gallery-lightbox-control-icon-size, 24px);--icon-height: var(--gallery-lightbox-control-icon-size, 24px);}.lightbox-close.svelte-14wkit2 {top:var(--gallery-lightbox-close-top, 16px);right:var(--gallery-lightbox-close-right, 16px);}.lightbox-previous.svelte-14wkit2,\n  .lightbox-next.svelte-14wkit2 {top:50%;transform:translateY(-50%);}.lightbox-previous.svelte-14wkit2 {left:var(--gallery-lightbox-nav-inset, 16px);}.lightbox-next.svelte-14wkit2 {right:var(--gallery-lightbox-nav-inset, 16px);}"
+	code: ".gallery.svelte-14wkit2 {width:var(--gallery-width, 100%);padding:var(--gallery-padding, 0px);margin:var(--gallery-margin, 0px);background:var(--gallery-background, transparent);}.gallery.grid.svelte-14wkit2 {display:grid;grid-template-columns:var(\n      --gallery-grid-template-columns,\n      repeat(var(--gallery-columns, 3), 1fr)\n    );gap:var(--gallery-gap, 8px);}.gallery.list.svelte-14wkit2 {display:flex;flex-direction:column;gap:var(--gallery-gap, 8px);}.gallery-item.svelte-14wkit2 {position:relative;}.grid.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2) {aspect-ratio:var(--gallery-item-aspect-ratio, 1);border-radius:var(--gallery-item-border-radius, 0px);overflow:hidden;--image-width: 100%;--image-height: 100%;--image-object-fit: var(--gallery-item-image-fit, cover);--image-border-radius: var(--gallery-item-border-radius, 0px);--image-transition: var(--gallery-item-image-transition);}.grid.has-item-footer.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2) {aspect-ratio:auto;overflow:visible;border-radius:0px;}.list.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2) {display:flex;align-items:center;border-radius:var(--gallery-list-item-border-radius, 0px);background:var(--gallery-list-item-background, transparent);--image-width: var(--gallery-list-thumbnail-width, 56px);--image-height: var(--gallery-list-thumbnail-height, 56px);--image-object-fit: var(--gallery-list-thumbnail-fit, cover);--image-border-radius: var(--gallery-list-thumbnail-border-radius, 0px);--image-transition: var(--gallery-item-image-transition);--image-flex-shrink: 0;}.gallery-item-content.svelte-14wkit2 {font:inherit;color:inherit;border:var(--gallery-item-border, none);background:transparent;}button.gallery-item-content.svelte-14wkit2 {cursor:var(--gallery-item-cursor, pointer);transition:var(--gallery-item-transition);}.grid.svelte-14wkit2 .gallery-item-content:where(.svelte-14wkit2) {display:block;width:100%;height:100%;padding:0;border-radius:var(--gallery-item-border-radius, 0px);}.grid.has-item-footer.svelte-14wkit2 .gallery-item-content:where(.svelte-14wkit2) {display:flex;flex-direction:column;height:auto;border-radius:var(--gallery-item-border-radius, 0px);overflow:hidden;}.grid-image-wrap.svelte-14wkit2 {display:block;aspect-ratio:var(--gallery-item-aspect-ratio, 1);overflow:hidden;--image-width: 100%;--image-height: 100%;--image-object-fit: var(--gallery-item-image-fit, cover);--image-border-radius: 0px;--image-transition: var(--gallery-item-image-transition);}.list.svelte-14wkit2 .gallery-item-content:where(.svelte-14wkit2) {display:flex;align-items:center;text-align:left;flex:1;min-width:0;gap:var(--gallery-list-item-gap, 12px);padding:var(--gallery-list-item-padding, 8px);}.grid.svelte-14wkit2 button.gallery-item-content:where(.svelte-14wkit2):hover {opacity:var(--gallery-item-hover-opacity, 1);transform:var(--gallery-item-hover-transform);}.grid.svelte-14wkit2 button.gallery-item-content:where(.svelte-14wkit2):focus-visible {outline:var(--gallery-item-focus-outline, 2px solid currentColor);outline-offset:var(--gallery-item-focus-outline-offset, 2px);}.list.svelte-14wkit2 button.gallery-item-content:where(.svelte-14wkit2):focus-visible {outline:none;}.list.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2):has(button.gallery-item-content:where(.svelte-14wkit2)):hover {background:var(--gallery-list-item-hover-background, transparent);}.list.svelte-14wkit2 .gallery-item:where(.svelte-14wkit2):has(button.gallery-item-content:where(.svelte-14wkit2):focus-visible) {outline:var(--gallery-item-focus-outline, 2px solid currentColor);outline-offset:var(--gallery-item-focus-outline-offset, 2px);}.list-text.svelte-14wkit2 {display:flex;flex-direction:column;gap:var(--gallery-list-text-gap, 2px);min-width:0;}.list-title.svelte-14wkit2,\n  .list-caption.svelte-14wkit2 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.list-title.svelte-14wkit2 {color:var(--gallery-list-title-color, inherit);font-size:var(--gallery-list-title-font-size, 14px);font-weight:var(--gallery-list-title-font-weight, 500);font-family:var(--gallery-list-title-font-family, inherit);}.list-caption.svelte-14wkit2 {color:var(--gallery-list-caption-color, inherit);font-size:var(--gallery-list-caption-font-size, 12px);font-family:var(--gallery-list-caption-font-family, inherit);}.gallery-item-actions.svelte-14wkit2 {display:flex;align-items:center;gap:var(--gallery-item-actions-gap, 4px);}.grid.svelte-14wkit2 .gallery-item-actions:where(.svelte-14wkit2) {position:absolute;top:var(--gallery-item-actions-top, 8px);right:var(--gallery-item-actions-right, 8px);}.list.svelte-14wkit2 .gallery-item-actions:where(.svelte-14wkit2) {flex-shrink:0;padding-right:var(--gallery-item-actions-right, 8px);}.gallery-item-action.svelte-14wkit2 {border-radius:var(--gallery-item-action-border-radius, 8px);--button-color: transparent;--button-hover-color: transparent;--button-padding: var(--gallery-item-action-padding, 6px);--button-border-radius: var(--gallery-item-action-border-radius, 8px);--icon-container-padding: 0px;--icon-padding: 0px;--icon-width: var(--gallery-item-action-icon-size, 16px);--icon-height: var(--gallery-item-action-icon-size, 16px);}.grid.svelte-14wkit2 .gallery-item-action:where(.svelte-14wkit2) {background:var(--gallery-item-action-background, #00000066);-webkit-backdrop-filter:var(--gallery-item-action-backdrop-filter, blur(8px));backdrop-filter:var(--gallery-item-action-backdrop-filter, blur(8px));--button-text-color: var(--gallery-item-action-color, #ffffff);}.grid.svelte-14wkit2 .gallery-item-action:where(.svelte-14wkit2):hover {background:var(--gallery-item-action-hover-background, #00000099);}.list.svelte-14wkit2 .gallery-item-action:where(.svelte-14wkit2) {background:var(--gallery-item-action-background, transparent);--button-text-color: var(--gallery-item-action-color, currentColor);}.list.svelte-14wkit2 .gallery-item-action:where(.svelte-14wkit2):hover {background:var(--gallery-item-action-hover-background, #80808026);}.lightbox.svelte-14wkit2 {position:fixed;top:0;bottom:0;left:0;right:0;z-index:var(--gallery-lightbox-z-index, 15);display:flex;justify-content:center;align-items:center;background:var(--gallery-lightbox-background, #000000e6);-webkit-tap-highlight-color:transparent;}.lightbox.svelte-14wkit2:focus {outline:none;}\n\n  /* lightboxAction focuses this element directly on open (and goToIndex\n     re-focuses it whenever focus isn't already inside), and it's the\n     Tab-trap's own boundary, so the unconditional :focus suppression above\n     left a keyboard user with no visible sign focus had moved into the\n     lightbox at all. :focus-visible wins the cascade over the plain :focus\n     rule above (equal specificity, later in source, and a strict subset) only\n     when the browser judges this came from keyboard/programmatic focus, so\n     the thumbnail click that opens the lightbox still shows nothing new.\n     outline-offset is negative (inset), matching Sheet's sheet-panel: the\n     lightbox sits flush against all four viewport edges, so a positive offset\n     would clip. */.lightbox.svelte-14wkit2:focus-visible {outline:var(--gallery-lightbox-focus-outline, 2px solid #2563eb);outline-offset:var(--gallery-lightbox-focus-outline-offset, -2px);}.lightbox-figure.svelte-14wkit2 {display:flex;flex-direction:column;align-items:center;gap:var(--gallery-lightbox-caption-gap, 12px);margin:0;pointer-events:none;--image-width: var(--gallery-lightbox-image-width, 85vw);--image-height: var(--gallery-lightbox-image-height, 75vh);--image-object-fit: var(--gallery-lightbox-image-fit, contain);--image-border-radius: var(--gallery-lightbox-image-border-radius, 0px);}.lightbox-caption.svelte-14wkit2 {color:var(--gallery-lightbox-caption-color, #ffffff);font-size:var(--gallery-lightbox-caption-font-size, 14px);font-family:var(--gallery-lightbox-caption-font-family, inherit);text-align:center;max-width:var(--gallery-lightbox-image-width, 85vw);}.lightbox-counter.svelte-14wkit2 {position:absolute;bottom:var(--gallery-lightbox-counter-bottom, 16px);left:50%;transform:translateX(-50%);color:var(--gallery-lightbox-counter-color, #ffffff);font-size:var(--gallery-lightbox-counter-font-size, 13px);font-family:var(--gallery-lightbox-counter-font-family, inherit);}.lightbox-close.svelte-14wkit2,\n  .lightbox-previous.svelte-14wkit2,\n  .lightbox-next.svelte-14wkit2 {position:absolute;--button-color: var(--gallery-lightbox-control-background, transparent);--button-text-color: var(--gallery-lightbox-control-color, #ffffff);--button-hover-color: var(--gallery-lightbox-control-hover-background, #ffffff1f);--button-padding: var(--gallery-lightbox-control-padding, 8px);--button-border-radius: var(--gallery-lightbox-control-border-radius, 50%);--icon-container-padding: 0px;--icon-padding: 0px;--icon-width: var(--gallery-lightbox-control-icon-size, 24px);--icon-height: var(--gallery-lightbox-control-icon-size, 24px);}.lightbox-close.svelte-14wkit2 {top:var(--gallery-lightbox-close-top, 16px);right:var(--gallery-lightbox-close-right, 16px);}.lightbox-previous.svelte-14wkit2,\n  .lightbox-next.svelte-14wkit2 {top:50%;transform:translateY(-50%);}.lightbox-previous.svelte-14wkit2 {left:var(--gallery-lightbox-nav-inset, 16px);}.lightbox-next.svelte-14wkit2 {right:var(--gallery-lightbox-nav-inset, 16px);}"
 };
 function Gallery(e, t) {
 	push(t, !0), append_styles$1(e, $$css$39);
@@ -50251,7 +50939,7 @@ function normalizeDictationState(e) {
 //#region src/lib/ChatComposer/ChatComposer.svelte
 var root$12 = /* @__PURE__ */ from_html("<div class=\"sr-only svelte-xpd394\" role=\"status\" aria-live=\"polite\"> </div>"), root_1$11 = /* @__PURE__ */ from_html("<div class=\"attachments-rich svelte-xpd394\"><!></div>"), root_2$6 = /* @__PURE__ */ from_html("<div class=\"attachments svelte-xpd394\"></div>"), root_3$6 = /* @__PURE__ */ from_html("<div class=\"control attach svelte-xpd394\"><!> <input type=\"file\" class=\"file-input\" hidden=\"\"/></div>"), root_4$5 = /* @__PURE__ */ from_html("<div class=\"leading svelte-xpd394\"><!></div>"), root_5$4 = /* @__PURE__ */ from_html("<div><!></div>"), root_6$4 = /* @__PURE__ */ from_html("<div class=\"control send stop svelte-xpd394\"><!></div>"), root_7$4 = /* @__PURE__ */ from_html("<div class=\"control send action svelte-xpd394\"><!></div>"), root_8$4 = /* @__PURE__ */ from_html("<div class=\"control send svelte-xpd394\"><!></div>"), root_9$3 = /* @__PURE__ */ from_html("<div><!> <!> <div class=\"input-row svelte-xpd394\"><!> <!> <textarea class=\"input svelte-xpd394\" rows=\"1\"></textarea> <!> <!></div></div>"), $$css$32 = {
 	hash: "svelte-xpd394",
-	code: ".chat-composer.svelte-xpd394 {box-sizing:border-box;display:flex;flex-direction:column;gap:var(--chat-composer-stack-gap, 8px);width:var(--chat-composer-width, 100%);padding:var(--chat-composer-padding, 8px);background:var(--chat-composer-background, #ffffff);border:var(--chat-composer-border, 1px solid #e4e4e7);border-radius:var(--chat-composer-border-radius, 24px);box-shadow:var(--chat-composer-box-shadow, none);}.chat-composer.disabled.svelte-xpd394 {opacity:var(--chat-composer-disabled-opacity, 0.6);}.attachments-rich.svelte-xpd394 {padding:var(--chat-composer-attachments-padding, 2px 4px 0);}.attachments.svelte-xpd394 {display:flex;flex-wrap:wrap;gap:var(--chat-composer-attachments-gap, 6px);padding:var(--chat-composer-attachments-padding, 2px 4px 0);}.input-row.svelte-xpd394 {display:flex;align-items:flex-end;gap:var(--chat-composer-gap, 8px);}.leading.svelte-xpd394 {display:flex;align-items:center;flex-shrink:0;}.input.svelte-xpd394 {flex:1;box-sizing:border-box;resize:none;border:none;outline:none;background:transparent;font-family:var(--chat-composer-font-family, inherit);font-size:var(--chat-composer-font-size, 0.9375rem);font-weight:var(--chat-composer-font-weight, 400);line-height:var(--chat-composer-line-height, 1.5);color:var(--chat-composer-color, #18181b);padding:var(--chat-composer-input-padding, 6px 4px);max-height:var(--chat-composer-max-height, 160px);overflow-y:auto;}.input.svelte-xpd394::placeholder {color:var(--chat-composer-placeholder-color, #52525b);}.control.svelte-xpd394 {flex-shrink:0;display:flex;}.control.svelte-xpd394 svg {height:100%;width:100%;}.attach.svelte-xpd394,\n  .voice.svelte-xpd394 {--button-width: var(--chat-composer-action-size, 36px);--button-height: var(--chat-composer-action-size, 36px);--button-padding: var(--chat-composer-action-padding, 8px);--button-border-radius: var(--chat-composer-action-border-radius, 50%);--button-color: var(--chat-composer-action-background-color, transparent);--button-text-color: var(--chat-composer-action-color, #52525b);--button-content-gap: 0px;--button-hover-color: var(--chat-composer-action-hover-background-color, #f4f4f5);}.voice.recording.svelte-xpd394 {--button-color: var(--chat-composer-voice-recording-background-color, #fee2e2);--button-text-color: var(--chat-composer-voice-recording-color, #dc2626);}\n\n  /* No dedicated busy palette: the disabled `Button` already dims itself\n     (`--disabled-opacity`), which is enough to distinguish \"busy\" from the\n     active \"recording\" red without inventing new color tokens that would\n     need a matching dark-theme entry outside this component's scope. The\n     `.busy` class is still applied to the wrapper (see markup) so a caller\n     can target it with their own CSS if they want a distinct look. */.send.svelte-xpd394 {--button-width: var(--chat-composer-send-size, 40px);--button-height: var(--chat-composer-send-size, 40px);--button-padding: var(--chat-composer-send-padding, 8px);--button-border-radius: var(--chat-composer-send-border-radius, 50%);--button-color: var(--chat-composer-send-background-color, #18181b);--button-text-color: var(--chat-composer-send-color, #ffffff);--button-content-gap: 0px;--button-hover-color: var(--chat-composer-send-hover-background-color, #27272a);}.send.stop.svelte-xpd394 {--button-color: var(--chat-composer-stop-background-color, #18181b);--button-text-color: var(--chat-composer-stop-color, #ffffff);}\n\n  /* Visually hidden but still read by assistive technology -- same pattern\n     Table's caption and Label's required marker use. */.sr-only.svelte-xpd394 {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}"
+	code: ".chat-composer.svelte-xpd394 {box-sizing:border-box;display:flex;flex-direction:column;gap:var(--chat-composer-stack-gap, 8px);width:var(--chat-composer-width, 100%);padding:var(--chat-composer-padding, 8px);background:var(--chat-composer-background, #ffffff);border:var(--chat-composer-border, 1px solid #e4e4e7);border-radius:var(--chat-composer-border-radius, 24px);box-shadow:var(--chat-composer-box-shadow, none);}.chat-composer.disabled.svelte-xpd394 {opacity:var(--chat-composer-disabled-opacity, 0.6);}\n\n  /* .input below sets outline: none with nothing standing in for it, so the\n     visible replacement lives here on the surrounding surface instead --\n     :focus-within lights up whenever the textarea inside is focused, the same\n     pattern Select's .select-trigger uses for its nested search input. */.chat-composer.svelte-xpd394:focus-within {border-color:var(--chat-composer-focus-border-color, #2563eb);box-shadow:var(--chat-composer-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.attachments-rich.svelte-xpd394 {padding:var(--chat-composer-attachments-padding, 2px 4px 0);}.attachments.svelte-xpd394 {display:flex;flex-wrap:wrap;gap:var(--chat-composer-attachments-gap, 6px);padding:var(--chat-composer-attachments-padding, 2px 4px 0);}.input-row.svelte-xpd394 {display:flex;align-items:flex-end;gap:var(--chat-composer-gap, 8px);}.leading.svelte-xpd394 {display:flex;align-items:center;flex-shrink:0;}.input.svelte-xpd394 {flex:1;box-sizing:border-box;resize:none;border:none;outline:none;background:transparent;font-family:var(--chat-composer-font-family, inherit);font-size:var(--chat-composer-font-size, 0.9375rem);font-weight:var(--chat-composer-font-weight, 400);line-height:var(--chat-composer-line-height, 1.5);color:var(--chat-composer-color, #18181b);padding:var(--chat-composer-input-padding, 6px 4px);max-height:var(--chat-composer-max-height, 160px);overflow-y:auto;}.input.svelte-xpd394::placeholder {color:var(--chat-composer-placeholder-color, #52525b);}.control.svelte-xpd394 {flex-shrink:0;display:flex;}.control.svelte-xpd394 svg {height:100%;width:100%;}.attach.svelte-xpd394,\n  .voice.svelte-xpd394 {--button-width: var(--chat-composer-action-size, 36px);--button-height: var(--chat-composer-action-size, 36px);--button-padding: var(--chat-composer-action-padding, 8px);--button-border-radius: var(--chat-composer-action-border-radius, 50%);--button-color: var(--chat-composer-action-background-color, transparent);--button-text-color: var(--chat-composer-action-color, #52525b);--button-content-gap: 0px;--button-hover-color: var(--chat-composer-action-hover-background-color, #f4f4f5);}.voice.recording.svelte-xpd394 {--button-color: var(--chat-composer-voice-recording-background-color, #fee2e2);--button-text-color: var(--chat-composer-voice-recording-color, #dc2626);}\n\n  /* No dedicated busy palette: the disabled `Button` already dims itself\n     (`--disabled-opacity`), which is enough to distinguish \"busy\" from the\n     active \"recording\" red without inventing new color tokens that would\n     need a matching dark-theme entry outside this component's scope. The\n     `.busy` class is still applied to the wrapper (see markup) so a caller\n     can target it with their own CSS if they want a distinct look. */.send.svelte-xpd394 {--button-width: var(--chat-composer-send-size, 40px);--button-height: var(--chat-composer-send-size, 40px);--button-padding: var(--chat-composer-send-padding, 8px);--button-border-radius: var(--chat-composer-send-border-radius, 50%);--button-color: var(--chat-composer-send-background-color, #18181b);--button-text-color: var(--chat-composer-send-color, #ffffff);--button-content-gap: 0px;--button-hover-color: var(--chat-composer-send-hover-background-color, #27272a);}.send.stop.svelte-xpd394 {--button-color: var(--chat-composer-stop-background-color, #18181b);--button-text-color: var(--chat-composer-stop-color, #ffffff);}\n\n  /* Visually hidden but still read by assistive technology -- same pattern\n     Table's caption and Label's required marker use. */.sr-only.svelte-xpd394 {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border-width:0;}"
 };
 function ChatComposer(e, t) {
 	push(t, !0), append_styles$1(e, $$css$32);
@@ -53467,7 +54155,7 @@ customElements.define("sui-chat-tool-status", create_custom_element(ChatToolStat
 //#region src/lib/assets/chat.svg?raw
 var chat_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\" />\n</svg>\n", root_1$6 = /* @__PURE__ */ from_html("<div class=\"panel svelte-15b7gm8\" role=\"dialog\" tabindex=\"-1\"><!></div>"), root_2$4 = /* @__PURE__ */ from_html("<div class=\"panel-anchor svelte-15b7gm8\"><!></div>"), root_3$4 = /* @__PURE__ */ from_html("<div><!> <div class=\"launcher svelte-15b7gm8\"><!></div></div>"), $$css$18 = {
 	hash: "svelte-15b7gm8",
-	code: ".chat-bubble.svelte-15b7gm8 {position:fixed;z-index:var(--chat-bubble-z-index, 1000);transition:var(--chat-bubble-snap-transition, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1));}.chat-bubble.dragging.svelte-15b7gm8 {transition:none;}.chat-bubble[data-position='bottom-right'].svelte-15b7gm8 {right:var(--chat-bubble-offset-x, 24px);bottom:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='bottom-left'].svelte-15b7gm8 {left:var(--chat-bubble-offset-x, 24px);bottom:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='top-right'].svelte-15b7gm8 {right:var(--chat-bubble-offset-x, 24px);top:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='top-left'].svelte-15b7gm8 {left:var(--chat-bubble-offset-x, 24px);top:var(--chat-bubble-offset-y, 24px);}.panel-anchor.svelte-15b7gm8 {position:absolute;--resizable-handle-color: var(--chat-bubble-resize-handle-color, transparent);--resizable-transition: var(\n      --chat-bubble-expand-transition,\n      width 0.32s cubic-bezier(0.22, 1, 0.36, 1),\n      height 0.32s cubic-bezier(0.22, 1, 0.36, 1)\n    );}.chat-bubble[data-effective-vertical='bottom'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {bottom:calc(100% + var(--chat-bubble-panel-gap, 16px));}.chat-bubble[data-effective-vertical='top'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {top:calc(100% + var(--chat-bubble-panel-gap, 16px));}.chat-bubble[data-effective-side='right'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {right:0;}.chat-bubble[data-effective-side='left'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {left:0;}.panel.svelte-15b7gm8 {box-sizing:border-box;width:100%;height:100%;max-width:var(--chat-bubble-panel-max-width, calc(100vw - 32px));max-height:var(--chat-bubble-panel-max-height, calc(100dvh - 120px));border-radius:var(--chat-bubble-panel-border-radius, 16px);overflow:hidden;background:var(--chat-bubble-panel-background, #ffffff);box-shadow:var(--chat-bubble-panel-box-shadow, 0 16px 48px rgba(0, 0, 0, 0.22));outline:none;}.launcher.svelte-15b7gm8 {--button-width: var(--chat-bubble-width, var(--chat-bubble-size, 56px));--button-height: var(--chat-bubble-height, var(--chat-bubble-size, 56px));--button-padding: var(--chat-bubble-padding, 16px);--button-border-radius: var(--chat-bubble-border-radius, 50%);--button-color: var(--chat-bubble-background-color, #18181b);--button-text-color: var(--chat-bubble-color, #ffffff);\n    /* Button spaces its icon from its label with this gap. The launcher renders an\n       icon alone inside a circle, so that gap would push the glyph off-centre --\n       reset to 0 here rather than in Button, whose default is right for a labelled\n       button. docs/ChatBubble.md records this as a pill-launcher caveat. */--button-content-gap: 0px;--button-box-shadow: var(--chat-bubble-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.25));--button-hover-color: var(--chat-bubble-hover-background-color, #27272a);}.chat-bubble.is-draggable.svelte-15b7gm8 .launcher:where(.svelte-15b7gm8) {--cursor: grab;touch-action:none;}.chat-bubble.is-draggable.dragging.svelte-15b7gm8 .launcher:where(.svelte-15b7gm8) {--cursor: grabbing;}.launcher.svelte-15b7gm8 svg {height:100%;width:100%;}\n\n  @media (prefers-reduced-motion: reduce) {.chat-bubble.svelte-15b7gm8 {transition:none;}\n  }"
+	code: ".chat-bubble.svelte-15b7gm8 {position:fixed;z-index:var(--chat-bubble-z-index, 1000);transition:var(--chat-bubble-snap-transition, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1));}.chat-bubble.dragging.svelte-15b7gm8 {transition:none;}.chat-bubble[data-position='bottom-right'].svelte-15b7gm8 {right:var(--chat-bubble-offset-x, 24px);bottom:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='bottom-left'].svelte-15b7gm8 {left:var(--chat-bubble-offset-x, 24px);bottom:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='top-right'].svelte-15b7gm8 {right:var(--chat-bubble-offset-x, 24px);top:var(--chat-bubble-offset-y, 24px);}.chat-bubble[data-position='top-left'].svelte-15b7gm8 {left:var(--chat-bubble-offset-x, 24px);top:var(--chat-bubble-offset-y, 24px);}.panel-anchor.svelte-15b7gm8 {position:absolute;--resizable-handle-color: var(--chat-bubble-resize-handle-color, transparent);--resizable-transition: var(\n      --chat-bubble-expand-transition,\n      width 0.32s cubic-bezier(0.22, 1, 0.36, 1),\n      height 0.32s cubic-bezier(0.22, 1, 0.36, 1)\n    );}.chat-bubble[data-effective-vertical='bottom'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {bottom:calc(100% + var(--chat-bubble-panel-gap, 16px));}.chat-bubble[data-effective-vertical='top'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {top:calc(100% + var(--chat-bubble-panel-gap, 16px));}.chat-bubble[data-effective-side='right'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {right:0;}.chat-bubble[data-effective-side='left'].svelte-15b7gm8 .panel-anchor:where(.svelte-15b7gm8) {left:0;}.panel.svelte-15b7gm8 {box-sizing:border-box;width:100%;height:100%;max-width:var(--chat-bubble-panel-max-width, calc(100vw - 32px));max-height:var(--chat-bubble-panel-max-height, calc(100dvh - 120px));border-radius:var(--chat-bubble-panel-border-radius, 16px);overflow:hidden;background:var(--chat-bubble-panel-background, #ffffff);box-shadow:var(--chat-bubble-panel-box-shadow, 0 16px 48px rgba(0, 0, 0, 0.22));outline:none;}\n\n  /* setOpen() (see script) calls panel.focus() directly on open, and the panel\n     -- not a child -- is the Tab-trap's own boundary, so removing its outline\n     unconditionally left a keyboard user with no visible sign focus had moved\n     into the launcher's panel at all. :focus-visible restores a ring only for\n     keyboard/programmatic focus, so the launcher click that opens the panel\n     shows nothing new. Matches Sheet's sheet-panel fix for the identical\n     shape of problem. */.panel.svelte-15b7gm8:focus-visible {outline:var(--chat-bubble-panel-focus-outline, 2px solid #2563eb);outline-offset:var(--chat-bubble-panel-focus-outline-offset, -2px);}.launcher.svelte-15b7gm8 {--button-width: var(--chat-bubble-width, var(--chat-bubble-size, 56px));--button-height: var(--chat-bubble-height, var(--chat-bubble-size, 56px));--button-padding: var(--chat-bubble-padding, 16px);--button-border-radius: var(--chat-bubble-border-radius, 50%);--button-color: var(--chat-bubble-background-color, #18181b);--button-text-color: var(--chat-bubble-color, #ffffff);\n    /* Button spaces its icon from its label with this gap. The launcher renders an\n       icon alone inside a circle, so that gap would push the glyph off-centre --\n       reset to 0 here rather than in Button, whose default is right for a labelled\n       button. docs/ChatBubble.md records this as a pill-launcher caveat. */--button-content-gap: 0px;--button-box-shadow: var(--chat-bubble-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.25));--button-hover-color: var(--chat-bubble-hover-background-color, #27272a);}.chat-bubble.is-draggable.svelte-15b7gm8 .launcher:where(.svelte-15b7gm8) {--cursor: grab;touch-action:none;}.chat-bubble.is-draggable.dragging.svelte-15b7gm8 .launcher:where(.svelte-15b7gm8) {--cursor: grabbing;}.launcher.svelte-15b7gm8 svg {height:100%;width:100%;}\n\n  @media (prefers-reduced-motion: reduce) {.chat-bubble.svelte-15b7gm8 {transition:none;}\n  }"
 };
 function ChatBubble(e, t) {
 	push(t, !0), append_styles$1(e, $$css$18);