@juspay/svelte-ui-components 4.32.1 → 4.33.1

package/dist-wc/index.js

@@ -3617,12 +3617,12 @@ var WHEEL_LENGTH = 10, DELTA_PROPERTY = "--_animated-number-delta", wheelDelta =
 		}
 	})();
 	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 = {
+}, root$112 = /* @__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$204 = {
 	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);
+	push(t, !0), append_styles$1(e, $$css$204);
 	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",
@@ -3787,7 +3787,7 @@ function AnimatedNumber(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);
+				var a = root$112(), 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);
@@ -3815,19 +3815,19 @@ create_custom_element(AnimatedNumber, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/AnimatedNumber.wc.svelte
-var rest_excludes$97 = new Set([
+var rest_excludes$98 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"animatedNumberAriaLabel"
-]), $$css$202 = {
+]), $$css$203 = {
 	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);
+	push(t, !0), append_styles$1(e, $$css$203);
+	let n = prop(t, "animatedNumberAriaLabel", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$98);
 	return AnimatedNumber(e, spread_props(() => i, { get ariaLabel() {
 		return n();
 	} })), pop({
@@ -3861,12 +3861,12 @@ customElements.define("sui-animated-number", create_custom_element(AnimatedNumbe
 }, [], [], { 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 = {
+var root_1$99 = /* @__PURE__ */ from_svg("<svg></svg>"), root_2$76 = /* @__PURE__ */ from_html("<img/>"), $$css$202 = {
 	hash: "svelte-13ogpty",
 	code: "img.svelte-13ogpty,\n  svg.svelte-13ogpty {object-fit:var(--image-object-fit);height:var(--image-height, 24px);width:var(--image-width, 24px);padding:var(--image-padding, 0px);border-radius:var(--image-border-radius, 0px);margin:var(--image-margin, 0px);filter:var(--image-filter, none);background:var(--image-background);border:var(--image-border);transition:var(--image-transition);}img.svelte-13ogpty:hover,\n  svg.svelte-13ogpty:hover {background:var(--image-hover-background, var(--image-background));border:var(--image-hover-border, var(--image-border));}"
 };
 function Img(e, t) {
-	push(t, !0), append_styles$1(e, $$css$201);
+	push(t, !0), append_styles$1(e, $$css$202);
 	let n = prop(t, "src", 7), i = prop(t, "alt", 7), a = prop(t, "fallback", 7), o = prop(t, "onerror", 7), s = prop(t, "classes", 7), c = prop(t, "inlineSvg", 7), l = prop(t, "transformSvg", 7), u = prop(t, "testId", 7), f = /* @__PURE__ */ user_derived(n), p = /* @__PURE__ */ state(null);
 	function h(e) {
 		return e.startsWith("data:image/svg+xml") ? !0 : (e.split("?")[0] ?? "").endsWith(".svg");
@@ -4067,15 +4067,15 @@ create_custom_element(Img, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/Avatar/Avatar.svelte
-var root$110 = /* @__PURE__ */ from_html("<span class=\"avatar-img-wrapper svelte-ym3tx2\"><!></span>"), root_1$98 = /* @__PURE__ */ from_html("<span class=\"avatar-initials svelte-ym3tx2\"> </span>"), root_2$75 = /* @__PURE__ */ from_html("<button type=\"button\"><!></button>"), root_3$64 = /* @__PURE__ */ from_html("<div role=\"img\"><!></div>"), $$css$200 = {
+var root$111 = /* @__PURE__ */ from_html("<span class=\"avatar-img-wrapper svelte-ym3tx2\"><!></span>"), root_1$98 = /* @__PURE__ */ from_html("<span class=\"avatar-initials svelte-ym3tx2\"> </span>"), root_2$75 = /* @__PURE__ */ from_html("<button type=\"button\"><!></button>"), root_3$64 = /* @__PURE__ */ from_html("<div role=\"img\"><!></div>"), $$css$201 = {
 	hash: "svelte-ym3tx2",
 	code: ".avatar.svelte-ym3tx2 {display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:var(--avatar-border-radius, 50%);border:var(--avatar-border, none);box-shadow:var(--avatar-box-shadow, none);cursor:var(--avatar-cursor, default);overflow:hidden;background-color:var(--avatar-background, #e0e0e0);font-family:inherit;}.avatar.svelte-ym3tx2:hover {opacity:var(--avatar-hover-opacity, 1);}.avatar-small.svelte-ym3tx2 {width:var(--avatar-small-width, 32px);height:var(--avatar-small-height, 32px);}.avatar-medium.svelte-ym3tx2 {width:var(--avatar-medium-width, 40px);height:var(--avatar-medium-height, 40px);}.avatar-large.svelte-ym3tx2 {width:var(--avatar-large-width, 56px);height:var(--avatar-large-height, 56px);}.avatar-img-wrapper.svelte-ym3tx2 {display:contents;--image-width: 100%;--image-height: 100%;--image-object-fit: var(--avatar-object-fit, cover);--image-border-radius: 0px;--image-padding: 0px;--image-margin: 0px;}.avatar-initials.svelte-ym3tx2 {color:var(--avatar-text-color, #555555);font-weight:var(--avatar-font-weight, 600);font-family:var(--avatar-font-family, inherit);user-select:none;}.avatar-small.svelte-ym3tx2 .avatar-initials:where(.svelte-ym3tx2) {font-size:var(--avatar-small-font-size, 12px);}.avatar-medium.svelte-ym3tx2 .avatar-initials:where(.svelte-ym3tx2) {font-size:var(--avatar-medium-font-size, 14px);}.avatar-large.svelte-ym3tx2 .avatar-initials:where(.svelte-ym3tx2) {font-size:var(--avatar-large-font-size, 20px);}"
 };
 function Avatar(e, t) {
-	push(t, !0), append_styles$1(e, $$css$200);
+	push(t, !0), append_styles$1(e, $$css$201);
 	let n = (e) => {
 		var t = comment(), n = first_child(t), o = (e) => {
-			var t = root$110();
+			var t = root$111();
 			Img(child(t), {
 				get src() {
 					return i();
@@ -4237,18 +4237,18 @@ function dispatchEvents(e, t) {
 }
 //#endregion
 //#region src/wc/components/Avatar.wc.svelte
-var rest_excludes$96 = new Set([
+var rest_excludes$97 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$199 = {
+]), $$css$200 = {
 	hash: "svelte-178cfp2",
 	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. The value\n     matches this component's own root element (inline-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-avatar-display, inline-block);}"
 };
 function Avatar_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$199);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$96), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$200);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$97), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Avatar(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-avatar", create_custom_element(Avatar_wc, {
@@ -4277,12 +4277,12 @@ 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$110 = /* @__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$199 = {
 	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);
+	push(t, !0), append_styles$1(e, $$css$199);
 	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() {
@@ -4341,7 +4341,7 @@ function Badge(e, t) {
 		}
 	}, 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();
+			var t = root$110();
 			let n;
 			var i = child(t), o = (e) => {
 				{
@@ -4364,7 +4364,7 @@ function Badge(e, t) {
 			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);
 	}, be = (e) => {
-		var t = root$109();
+		var t = root$110();
 		let n;
 		var i = child(t), o = (e) => {
 			{
@@ -4400,20 +4400,20 @@ create_custom_element(Badge, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Badge.wc.svelte
-var rest_excludes$95 = new Set([
+var rest_excludes$96 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"badgeAriaLabel",
 	"badgeHidden"
-]), $$css$197 = {
+]), $$css$198 = {
 	hash: "svelte-pb14wa",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-badge-display, block);}"
 };
 function Badge_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$197);
-	let n = prop(t, "badgeAriaLabel", 7), i = prop(t, "badgeHidden", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$95);
+	push(t, !0), append_styles$1(e, $$css$198);
+	let n = prop(t, "badgeAriaLabel", 7), i = prop(t, "badgeHidden", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$96);
 	return Badge(e, spread_props(() => a, {
 		get hidden() {
 			return i();
@@ -4476,12 +4476,12 @@ customElements.define("sui-badge", create_custom_element(Badge_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Breadcrumb/Breadcrumb.svelte
-var root$108 = /* @__PURE__ */ from_html("<li class=\"breadcrumb-separator svelte-1rmbuhq\" aria-hidden=\"true\"><!></li>"), root_1$96 = /* @__PURE__ */ from_html("<li class=\"breadcrumb-item svelte-1rmbuhq\"><!></li> <!>", 1), root_2$74 = /* @__PURE__ */ from_html("<nav><ol class=\"breadcrumb-list svelte-1rmbuhq\"></ol></nav>"), $$css$196 = {
+var root$109 = /* @__PURE__ */ from_html("<li class=\"breadcrumb-separator svelte-1rmbuhq\" aria-hidden=\"true\"><!></li>"), root_1$96 = /* @__PURE__ */ from_html("<li class=\"breadcrumb-item svelte-1rmbuhq\"><!></li> <!>", 1), root_2$74 = /* @__PURE__ */ from_html("<nav><ol class=\"breadcrumb-list svelte-1rmbuhq\"></ol></nav>"), $$css$197 = {
 	hash: "svelte-1rmbuhq",
 	code: ".breadcrumb-list.svelte-1rmbuhq {display:flex;list-style:none;padding:0;margin:0;gap:var(--breadcrumb-list-gap);flex-wrap:var(--breadcrumb-flex-wrap, nowrap);align-items:center;}.breadcrumb-item.svelte-1rmbuhq {display:flex;align-items:center;}.breadcrumb-separator.svelte-1rmbuhq {display:flex;align-items:center;color:var(--breadcrumb-separator-color, currentColor);}"
 };
 function Breadcrumb(e, t) {
-	push(t, !0), append_styles$1(e, $$css$196);
+	push(t, !0), append_styles$1(e, $$css$197);
 	let n = prop(t, "items", 7), i = prop(t, "item", 7), a = prop(t, "ariaLabel", 7), o = prop(t, "separator", 7), s = prop(t, "classes", 7), c = prop(t, "testId", 7);
 	var l = {
 		get items() {
@@ -4535,7 +4535,7 @@ function Breadcrumb(e, t) {
 			typeof i() == "function" && e(u);
 		}), reset(c);
 		var f = sibling(c, 2), p = (e) => {
-			var t = root$108(), n = child(t), i = (e) => {
+			var t = root$109(), n = child(t), i = (e) => {
 				var t = comment();
 				snippet(first_child(t), o), append(e, t);
 			}, a = (e) => {
@@ -4564,7 +4564,7 @@ create_custom_element(Breadcrumb, {
 //#region src/wc/components/Breadcrumb.wc.svelte
 var defaultItem = (e, t = noop) => {
 	var n = comment(), i = first_child(n), a = (e) => {
-		var n = root$107(), i = child(n, !0);
+		var n = root$108(), i = child(n, !0);
 		reset(n), template_effect(() => set_text(i, t().label)), append(e, n);
 	}, o = (e) => {
 		var n = root_1$95(), i = child(n, !0);
@@ -4578,12 +4578,12 @@ var defaultItem = (e, t = noop) => {
 	if_block(i, (e) => {
 		t().isLast ? e(a) : typeof t().href == "string" && t().href.length > 0 ? e(o, 1) : e(s, -1);
 	}), append(e, n);
-}, root$107 = /* @__PURE__ */ from_html("<span aria-current=\"page\"> </span>"), root_1$95 = /* @__PURE__ */ from_html("<a> </a>"), root_2$73 = /* @__PURE__ */ from_html("<span> </span>"), $$css$195 = {
+}, root$108 = /* @__PURE__ */ from_html("<span aria-current=\"page\"> </span>"), root_1$95 = /* @__PURE__ */ from_html("<a> </a>"), root_2$73 = /* @__PURE__ */ from_html("<span> </span>"), $$css$196 = {
 	hash: "svelte-a6zflu",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-breadcrumb-display, block);}"
 };
 function Breadcrumb_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$195);
+	push(t, !0), append_styles$1(e, $$css$196);
 	let n = prop(t, "breadcrumbAriaLabel", 7, ""), i = prop(t, "items", 23, () => []), a = prop(t, "classes", 7), o = prop(t, "separator", 7);
 	return Breadcrumb(e, {
 		get items() {
@@ -4647,12 +4647,12 @@ customElements.define("sui-breadcrumb", create_custom_element(Breadcrumb_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/assets/chevron-left-lg.svg?raw
-var chevron_left_lg_default = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <polyline points=\"15 18 9 12 15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", chevron_right_lg_default = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <polyline points=\"9 18 15 12 9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$106 = /* @__PURE__ */ from_html("<div></div>"), $$css$194 = {
+var chevron_left_lg_default = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <polyline points=\"15 18 9 12 15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", chevron_right_lg_default = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <polyline points=\"9 18 15 12 9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$107 = /* @__PURE__ */ from_html("<div></div>"), $$css$195 = {
 	hash: "svelte-1xov9mi",
 	code: ".loader.svelte-1xov9mi {font-size:var(--loader-font-size, 10px);text-indent:var(--loader-text-indent, -9999em);width:var(--loader-width, 20px);height:var(--loader-height, 20px);border-radius:var(--loader-border-radius, 50%);background:var(--loader-foreground);background:-moz-linear-gradient(\n      left,\n      var(--loader-foreground) 10%,\n      var(--loader-foreground-end) 42%\n    );background:-webkit-linear-gradient(\n      left,\n      var(--loader-foreground) 10%,\n      var(--loader-foreground-end) 42%\n    );background:-o-linear-gradient(\n      left,\n      var(--loader-foreground) 10%,\n      var(--loader-foreground-end) 42%\n    );background:-ms-linear-gradient(\n      left,\n      var(--loader-foreground) 10%,\n      var(--loader-foreground-end) 42%\n    );background:linear-gradient(\n      to right,\n      var(--loader-foreground) 10%,\n      var(--loader-foreground-end) 42%\n    );position:relative;\n    /* --loader-spin-* rather than --loader-animation-* — GridItem already reads an\n       unrelated --loader-animation-duration for its own clipper animation (a\n       pre-existing, differently-scoped name this file must not collide with). */\n    -webkit-animation: svelte-1xov9mi-load3 var(--loader-spin-duration, var(--motion-duration, 1.4s))\n      var(--loader-spin-easing, var(--motion-easing, linear)) infinite;\n    animation: svelte-1xov9mi-load3 var(--loader-spin-duration, var(--motion-duration, 1.4s))\n      var(--loader-spin-easing, var(--motion-easing, linear)) infinite;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);}.loader.svelte-1xov9mi:before {width:var(--loader-before-width, 10px);height:var(--loader-before-height, 10px);background:var(--loader-foreground);border-radius:var(--loader-before-border-radius, 100% 0 0 0);position:var(--loader-before-position, absolute);top:var(--loader-before-top, 0);left:var(--loader-before-left, 0);content:'';}.loader.svelte-1xov9mi:after {background:var(--loader-background);width:var(--loader-after-width, 15px);height:var(--loader-after-height, 15px);border-radius:var(--loader-after-border-radius, 50%);content:'';position:var(--loader-after-position, absolute);top:var(--loader-after-top, 50%);left:var(--loader-after-left, 50%);transform:translate(-50%, -50%);}\n  @-webkit-keyframes svelte-1xov9mi-load3 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes svelte-1xov9mi-load3 {\n    0% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n    }\n    100% {\n      -webkit-transform: rotate(360deg);\n      transform: rotate(360deg);\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) {.loader.svelte-1xov9mi,\n    .loader.svelte-1xov9mi:before,\n    .loader.svelte-1xov9mi:after {\n      -webkit-animation: none;\n      animation: none;}\n  }"
 };
 function Loader(e, t) {
-	push(t, !0), append_styles$1(e, $$css$194);
+	push(t, !0), append_styles$1(e, $$css$195);
 	let n = prop(t, "classes", 7), i = prop(t, "testId", 7);
 	var a = {
 		get classes() {
@@ -4667,7 +4667,7 @@ function Loader(e, t) {
 		set testId(e) {
 			i(e), flushSync();
 		}
-	}, o = root$106();
+	}, o = root$107();
 	return template_effect(() => {
 		set_class(o, 1, `loader ${n() ?? "" ?? ""}`, "svelte-1xov9mi"), set_attribute(o, "data-pw", typeof i() == "string" ? i() : null), set_attribute(o, "testid", typeof i() == "string" ? i() : null);
 	}), append(e, o), pop(a);
@@ -4678,12 +4678,12 @@ create_custom_element(Loader, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/Button/Button.svelte
-var root$105 = /* @__PURE__ */ from_html("<div class=\"button-progress-bar svelte-1j9w5l4\"></div>"), root_1$94 = /* @__PURE__ */ from_html("<div class=\"button-loader svelte-1j9w5l4\"><!></div>"), root_2$72 = /* @__PURE__ */ from_html("<div class=\"button-icon svelte-1j9w5l4\"><!></div>"), root_3$63 = /* @__PURE__ */ from_html("<div class=\"button-text svelte-1j9w5l4\"></div>"), root_4$51 = /* @__PURE__ */ from_html("<div class=\"button-text svelte-1j9w5l4\"> </div>"), root_5$41 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), root_6$34 = /* @__PURE__ */ from_html("<div><!> <!></div>"), $$css$193 = {
+var root$106 = /* @__PURE__ */ from_html("<div class=\"button-progress-bar svelte-1j9w5l4\"></div>"), root_1$94 = /* @__PURE__ */ from_html("<div class=\"button-loader svelte-1j9w5l4\"><!></div>"), root_2$72 = /* @__PURE__ */ from_html("<div class=\"button-icon svelte-1j9w5l4\"><!></div>"), root_3$63 = /* @__PURE__ */ from_html("<div class=\"button-text svelte-1j9w5l4\"></div>"), root_4$51 = /* @__PURE__ */ from_html("<div class=\"button-text svelte-1j9w5l4\"> </div>"), root_5$41 = /* @__PURE__ */ from_html("<!> <!> <!> <!>", 1), root_6$34 = /* @__PURE__ */ from_html("<div><!> <!></div>"), $$css$194 = {
 	hash: "svelte-1j9w5l4",
 	code: ".button-container.svelte-1j9w5l4 {position:relative;width:var(--button-width, fit-content);}\n\n  /* ---- Variant defaults (set the internal --_btn-* layer; explicit --button-* always wins) ---- */.variant-primary.svelte-1j9w5l4 {--_btn-color: #3a4550;--_btn-text-color: #ffffff;--_btn-border: none;}.variant-secondary.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: var(--button-secondary-text-color, #3a4550);--_btn-border: 1px solid var(--button-secondary-border-color, #cbd5e1);--_btn-hover-color: var(--button-secondary-hover-background, #f1f5f9);--_btn-hover-text-color: var(--button-secondary-text-color, #3a4550);--_btn-hover-border: 1px solid var(--button-secondary-border-color, #cbd5e1);}.variant-ghost.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: var(--button-ghost-text-color, #3a4550);--_btn-border: none;--_btn-hover-color: var(--button-ghost-hover-background, #f1f5f9);--_btn-hover-text-color: var(--button-ghost-text-color, #3a4550);--_btn-hover-border: none;}.variant-destructive.svelte-1j9w5l4 {--_btn-color: #e7000b;--_btn-text-color: #ffffff;--_btn-border: none;--_btn-hover-color: #c10007;--_btn-hover-text-color: #ffffff;--_btn-hover-border: none;}\n\n  /* Transparent chassis for gradient marketing CTAs — deliberately no background\n     of its own. Pair with a --button-background gradient (and usually a matching\n     --button-hover-color, since --_btn-hover-color sits before --button-background\n     in the hover fallback chain and would otherwise flatten the gradient to\n     transparent on hover). Geometry (padding/font-size) is intentionally left to\n     the size preset, not this variant. */.variant-brand.svelte-1j9w5l4 {--_btn-color: transparent;--_btn-text-color: #ffffff;--_btn-border: none;--_btn-hover-color: transparent;--_btn-hover-text-color: #ffffff;--_btn-hover-border: none;}\n\n  /* ---- Size defaults (md reproduces the legacy 16px padding / 14px font) ---- */.size-sm.svelte-1j9w5l4 {--_btn-padding: 8px 12px;--_btn-font-size: 13px;}.size-md.svelte-1j9w5l4 {--_btn-padding: 16px;--_btn-font-size: 14px;}.size-lg.svelte-1j9w5l4 {--_btn-padding: 20px 28px;--_btn-font-size: 16px;}.icon-only.svelte-1j9w5l4 {--_btn-padding: 8px;}.icon-only.size-sm.svelte-1j9w5l4 {--_btn-padding: 6px;}.icon-only.size-lg.svelte-1j9w5l4 {--_btn-padding: 12px;}.full-width.svelte-1j9w5l4 {--button-width: 100%;}.button-el.svelte-1j9w5l4 {max-height:var(--button-max-height);max-width:var(--button-max-width);min-width:var(--button-min-width);font-family:var(--button-font-family);font-weight:var(--button-font-weight, 500);font-size:var(--button-font-size, var(--_btn-font-size, 14px));background-color:var(--button-color, var(--_btn-color, #3a4550));\n    /* Image layer, deliberately not the `background` shorthand — the shorthand\n       would reset a consumer's own background-image/position/size layers\n       whenever the hook is unset. Gradients go here; solids stay on --button-color. */background-image:var(--button-background, none);color:var(\n      --button-text-color,\n      var(--_btn-text-color, var(--button-neutral-text-color, white))\n    );height:var(--button-height, fit-content);padding:var(--button-padding, var(--_btn-padding, 16px));margin:var(--button-margin);border-radius:var(--button-border-radius, var(--radius, 6px));width:var(--button-width, fit-content);cursor:var(--cursor, pointer);opacity:var(--opacity, 1);border:var(--button-border, var(--_btn-border, none));box-sizing:border-box;text-decoration:var(--button-text-decoration, none);line-height:var(--button-line-height, normal);display:flex;justify-content:var(--button-justify-content, center);align-items:center;flex-direction:var(--button-content-flex-direction, row);gap:var(--button-content-gap, 16px);visibility:var(--button-visibility, visible);box-shadow:var(--button-box-shadow, none);transition:var(--button-transition, none);\n\n    /* A button label should never soft-wrap onto a second line as the label text\n       changes (e.g. \"Select\" -> \"Select (1)\") — that jitters the layout around it.\n       Consumers that genuinely want multi-line buttons opt back in via the var. */white-space:var(--button-white-space, nowrap);}.button-el.disabled.svelte-1j9w5l4,\n  .button-el.svelte-1j9w5l4:disabled {cursor:var(--disabled-cursor, not-allowed);opacity:var(--disabled-opacity, 0.4);color:var(--disabled-text-color, var(--button-text-color, var(--_btn-text-color, white)));font-size:var(--disabled-font-size, inherit);font-weight:var(--disabled-font-weight, inherit);text-decoration:var(--button-disabled-text-decoration, var(--button-text-decoration, none));\n    /* Preserve the variant border when disabled so secondary (bordered) stays distinct from ghost. */border:var(--disabled-border, var(--button-border, var(--_btn-border, none)));background:var(\n      --disabled-background-color,\n      var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n    );box-shadow:var(\n      --button-disabled-box-shadow,\n      var(--disabled-box-shadow, var(--button-box-shadow, none))\n    );}.button-loader.svelte-1j9w5l4 {order:var(--button-loader-order, 1);}.button-icon.svelte-1j9w5l4 {order:var(--button-icon-order, 2);display:var(--button-icon-display);}.button-text.svelte-1j9w5l4 {order:var(--button-text-order, 3);display:var(--button-text-display);\n\n    /* With nowrap as the default, a label longer than the button's box would\n       otherwise bleed past it — truncate with an ellipsis instead. Full labels\n       stay available via the button's accessible name / title at the call site. */overflow:hidden;text-overflow:ellipsis;}.button-el.svelte-1j9w5l4:hover:not(.disabled) {background:var(\n      --button-hover-color,\n      var(\n        --_btn-hover-color,\n        var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n      )\n    );color:var(\n      --button-hover-text-color,\n      var(--_btn-hover-text-color, var(--button-text-color, var(--_btn-text-color, white)))\n    );border:var(\n      --button-hover-border,\n      var(--_btn-hover-border, var(--button-border, var(--_btn-border, none)))\n    );transform:var(--button-hover-transform);box-shadow:var(--button-hover-box-shadow, var(--button-box-shadow, none));}.button-el.svelte-1j9w5l4:active:not(.disabled) {transform:var(--button-active-transform);background:var(\n      --button-active-background,\n      var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))\n    );box-shadow:var(--button-active-box-shadow, var(--button-box-shadow, none));}.button-el.svelte-1j9w5l4:focus-visible {box-shadow:var(--button-focus-visible-box-shadow, var(--button-box-shadow, none));}.button-progress-bar.svelte-1j9w5l4 {position:absolute;height:100%;width:100%;background:var(--button-progress-loader-background-color, #00000030);\n    animation: svelte-1j9w5l4-fill-loader var(--button-progress-loader-duration, 8s) forwards;z-index:2;}\n\n  @keyframes svelte-1j9w5l4-fill-loader {\n    0% {\n      width: 0;\n    }\n\n    100% {\n      width: 100%;\n    }\n  }\n\n  /* This bar is not indefinite like a spinner -- its width IS the meaning:\n     \"how much of `--button-progress-loader-duration` has elapsed\", and\n     `showProgressBar` keeps the button disabled for that whole span. A bare\n     `animation: none` would freeze it at the base rule above (`width: 100%`),\n     showing a FULL, \"finished\" bar for up to 8s while the button is actually\n     still counting down and still disabled -- a frame that means something\n     else is worse than the motion it removed. Freezing at 0% instead would\n     lie the other way once the real duration elapses and the bar should read\n     complete. Neither static width is honest for the whole span, so motion is\n     thinned rather than removed: `steps()` swaps the continuous ease for\n     discrete jumps that hold the PRIOR interval's value until each jump (the\n     `jump-end` default), so the displayed width can only ever under-report\n     elapsed time -- never claim to be further along than it really is -- while\n     still losing the smooth per-frame slide prefers-reduced-motion targets.\n     The step count is a LITERAL, deliberately not a token. `steps()` is invalid\n     for a count below 1, and an invalid value does not fall back to a safer\n     stepped default -- the whole declaration is dropped and the property takes\n     the base rule's `ease`, restoring exactly the continuous slide this block\n     exists 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. A guard\n     that fails OPEN, quietly, is worse than no guard, and one tunable is not\n     worth that. \n     This block lives in the component's own <style> because that is the only\n     stylesheet that reaches inside the shadow root a custom-element consumer\n     gets. */\n  @media (prefers-reduced-motion: reduce) {.button-progress-bar.svelte-1j9w5l4 {animation-timing-function:steps(5, jump-end);}\n\n    /* The loader is not the only motion here. `--button-transition` defaults to\n       `none`, so this rule does nothing until a consumer opts in -- and the\n       documented way to opt in is exactly a hover/press animation, which is\n       what a user asking for reduced motion is asking not to have. The sweep\n       that covered every transition in ThemeSwitcher stopped at the one\n       animation the brief named in this file. */.button-el.svelte-1j9w5l4,\n    .button-container.svelte-1j9w5l4 {transition:none;}\n  }"
 };
 function Button(e, t) {
-	push(t, !0), append_styles$1(e, $$css$193);
+	push(t, !0), append_styles$1(e, $$css$194);
 	let n = prop(t, "text", 7), i = prop(t, "variant", 7, "primary"), a = prop(t, "size", 7, "md"), o = prop(t, "iconOnly", 7, !1), s = prop(t, "fullWidth", 7, !1), c = prop(t, "href", 7), l = prop(t, "target", 7), u = prop(t, "rel", 7), f = prop(t, "loading", 7, !1), p = prop(t, "allowHtml", 7, !1), h = prop(t, "enable", 7, !0), S = prop(t, "disabled", 7, !1), C = prop(t, "showLoader", 7, !1), k = prop(t, "loaderType", 7), R = prop(t, "showProgressBar", 15, !1), te = prop(t, "type", 7, "button"), ne = prop(t, "testId", 7), re = prop(t, "ariaLabel", 7), G = prop(t, "ariaExpanded", 7), be = prop(t, "ariaControls", 7), Me = prop(t, "ariaHaspopup", 7), Re = prop(t, "ariaSelected", 7), Ue = prop(t, "ariaBusy", 7), it = prop(t, "role", 7), at = prop(t, "title", 7), ot = prop(t, "onclick", 7), ct = prop(t, "onkeydown", 7, () => {}), lt = prop(t, "onkeyup", 7, () => {}), ut = prop(t, "onmousedown", 7), dt = prop(t, "onmouseup", 7), ft = prop(t, "onmouseleave", 7), pt = prop(t, "ontouchstart", 7), mt = prop(t, "ontouchend", 7), ht = prop(t, "icon", 7), gt = prop(t, "children", 7), _t = prop(t, "classes", 7), vt = prop(t, "style", 7), yt = /* @__PURE__ */ user_derived(() => f() || C() && k() === "Circular"), bt = /* @__PURE__ */ user_derived(() => C() && k() === "ProgressBar"), xt = /* @__PURE__ */ user_derived(() => get(yt) || R()), St = /* @__PURE__ */ user_derived(() => S() || !h() || get(yt) || R()), Ct = /* @__PURE__ */ user_derived(() => u() ?? (l() === "_blank" ? "noopener noreferrer" : null));
 	function wt(e) {
 		if (get(St)) {
@@ -4918,7 +4918,7 @@ function Button(e, t) {
 	}, Et = root_6$34();
 	let Dt;
 	var Ot = child(Et), kt = (e) => {
-		append(e, root$105());
+		append(e, root$106());
 	};
 	return if_block(Ot, (e) => {
 		R() && e(kt);
@@ -5036,12 +5036,12 @@ create_custom_element(Button, {
 }, [], [], { mode: "open" });
 //#endregion
 //#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 = {
+var root$105 = /* @__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$193 = {
 	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;}\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, var(--motion-duration, 0.3s))\n      var(--book-transition-easing, var(--motion-easing, ease));}.page-fade.svelte-1qrpci6 {position:absolute;top:0;left:0;opacity:0;transition:opacity var(--book-transition-duration, var(--motion-duration, 0.3s))\n      var(--book-transition-easing, var(--motion-easing, 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\n      var(--book-dot-transition-duration, var(--duration-base, 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);
+	push(t, !0), append_styles$1(e, $$css$193);
 	let n = prop(t, "pages", 7), i = prop(t, "currentPage", 15, 0), a = prop(t, "transition", 7, "slide"), o = prop(t, "showNavigation", 7, !0), s = prop(t, "showPageIndicator", 7, !0), c = prop(t, "enableSwipe", 7, !1), l = prop(t, "testId", 7), u = prop(t, "previousIcon", 7), f = prop(t, "nextIcon", 7), p = prop(t, "onpagechange", 7), h = prop(t, "classes", 7), S = 0, C = !1;
 	function k(e) {
 		e < 0 || e >= n().length || e === i() || (i(e), p()?.(i()));
@@ -5146,7 +5146,7 @@ function Book(e, t) {
 			h(e), flushSync();
 		}
 	}, Ue = root_5$40(), it = child(Ue), at = child(it), ot = (e) => {
-		var t = root$104();
+		var t = root$105();
 		let n;
 		var a = child(t);
 		{
@@ -5188,7 +5188,7 @@ function Book(e, t) {
 				n === i() && e(s);
 			}), append(e, a);
 		}, l = (e) => {
-			var a = root$104();
+			var a = root$105();
 			let o;
 			snippet(child(a), () => get(t).content), reset(a), template_effect(() => o = set_class(a, 1, "page page-fade svelte-1qrpci6", null, o, { "page-active": n === i() })), append(e, a);
 		}, u = (e) => {
@@ -5201,7 +5201,7 @@ function Book(e, t) {
 		}), append(e, o);
 	}), reset(ct);
 	var lt = sibling(ct, 2), ut = (e) => {
-		var t = root$104();
+		var t = root$105();
 		let a;
 		var o = child(t);
 		{
@@ -5268,18 +5268,18 @@ delegate([
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Book.wc.svelte
-var rest_excludes$94 = new Set([
+var rest_excludes$95 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$191 = {
+]), $$css$192 = {
 	hash: "svelte-h26req",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-book-display, block);}"
 };
 function Book_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$191);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$94), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$192);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$95), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Book(e, spread_props(() => n, () => get(a), {
 		previousIcon: (e) => {
 			var n = comment();
@@ -5338,12 +5338,12 @@ customElements.define("sui-book", create_custom_element(Book_wc, {
 }, ["previous-icon", "next-icon"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/BrandLoader/BrandLoader.svelte
-var root$103 = /* @__PURE__ */ from_html("<div class=\"sub-text svelte-hezyt6\"> </div>"), root_1$92 = /* @__PURE__ */ from_html("<div><div class=\"loader svelte-hezyt6\"><img alt=\"\" class=\"svelte-hezyt6\"/> <div class=\"text svelte-hezyt6\"> </div> <!> <div class=\"lds-ellipsis svelte-hezyt6\"><div class=\"svelte-hezyt6\"></div> <div class=\"svelte-hezyt6\"></div> <div class=\"svelte-hezyt6\"></div> <div class=\"svelte-hezyt6\"></div></div></div></div>"), $$css$190 = {
+var root$104 = /* @__PURE__ */ from_html("<div class=\"sub-text svelte-hezyt6\"> </div>"), root_1$92 = /* @__PURE__ */ from_html("<div><div class=\"loader svelte-hezyt6\"><img alt=\"\" class=\"svelte-hezyt6\"/> <div class=\"text svelte-hezyt6\"> </div> <!> <div class=\"lds-ellipsis svelte-hezyt6\"><div class=\"svelte-hezyt6\"></div> <div class=\"svelte-hezyt6\"></div> <div class=\"svelte-hezyt6\"></div> <div class=\"svelte-hezyt6\"></div></div></div></div>"), $$css$191 = {
 	hash: "svelte-hezyt6",
 	code: ".background.svelte-hezyt6 {height:var(--loader-background-height, auto);width:var(--loader-background-width, auto);\n    /* Caps the splash against whatever box it was placed in. min-width:0 is\n       required as well: as a flex item this would otherwise refuse to shrink\n       below the 100vw min-content of .loader inside it, and the cap would\n       resolve against a width .loader had itself dictated. */max-width:100%;min-width:0;border-radius:var(--loader-background-border-radius, 0px);}.loader.svelte-hezyt6 {\n    /* --loader-height/--loader-width are also independently read by the\n       unrelated Loader component (with a 20px default there, vs 100vh/100vw\n       here), so a consumer setting either name in a scope containing both\n       components would size them identically. --brand-loader-* is the\n       namespaced, collision-free override point; the legacy --loader-*\n       names are kept as a fallback so existing consumer overrides keep\n       working unchanged. */height:var(--brand-loader-height, var(--loader-height, 100vh));width:var(--brand-loader-width, var(--loader-width, 100vw));border-radius:var(--loader-background-border-radius, 0px);\n    /* The 100vw/100vh default above is the full-screen splash case. An embedded\n       instance must never exceed the box it was placed in: this is a centring\n       flex container, so overflowing it centres the logo on the viewport rather\n       than on the container and the content visibly drifts to one side. */max-width:100%;max-height:100%;display:flex;justify-content:var(--loader-justify-content, center);align-items:var(--loader-align-items, center);flex-direction:var(--loader-flex-direction, column);}.loader.svelte-hezyt6 img:where(.svelte-hezyt6) {height:var(--loader-img-height, 40px);width:var(--loader-img-width, 71px);}.text.svelte-hezyt6 {font-size:var(--loader-text-font-size, 22px);padding:var(--loader-text-padding, 16px 0px);\n    /* The frosted overlay below is only ~20% opaque, so its painted colour is\n       mostly whatever page sits behind it. A splash screen is far more often\n       hosted on a light page than over dark imagery, so the readable-by-default\n       choice is a dark tone here; --loader-text-color stays the override point\n       for the over-dark-imagery look (e.g. --loader-text-color: white). */color:var(--loader-text-color, #333333);font-family:var(--loader-text-font, inherit);}.sub-text.svelte-hezyt6 {font-size:var(--loader-sub-text-font-size, 12px);margin:var(--loader-sub-text-margin, 16px);\n    /* Previously unset, so it silently inherited whatever colour the host page\n       happened to have -- legible by accident on this doc site, invisible or\n       wrong wherever that assumption didn't hold. Same reasoning as .text: a\n       muted dark tone reads on the default light backdrop. */color:var(--loader-sub-text-color, #52525b);}\n\n  /* `.background` used to declare `animation: animateBackground ...` here, but\n     `@keyframes animateBackground` has never existed anywhere in this repo --\n     confirmed back to 8801087c, the commit that introduced BrandLoader (Nov\n     2023). It referenced nothing and so never animated anything; this was\n     dead from day one, not a regression, and no prior design for what it\n     should look like ever shipped, so it is removed rather than reconstructed.\n     The `prefers-reduced-motion` override below is left in place as a guard:\n     if a real indefinite animation is ever added to `.background`, that guard\n     already stops it. */\n  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {.loader.svelte-hezyt6 {background-color:var(--loader-background-color, #ffffff33);-webkit-backdrop-filter:blur(var(--loader-webkit-backdrop-filter, 50px));backdrop-filter:blur(var(--loader-backdrop-blur, 50px));}\n  }.lds-ellipsis.svelte-hezyt6 {display:var(--loader-ellipsis-display, inline-block);position:var(--loader-ellipsis-position, relative);width:var(--loader-ellipsis-width, 80px);height:var(--loader-ellipsis-height, 80px);}.lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6) {display:var(--loader-ellipsis-div-display, inherit);position:var(--loader-ellipsis-div-position, absolute);top:var(--loader-ellipsis-div-top, 5px);width:var(--loader-ellipsis-div-width, 13px);height:var(--loader-ellipsis-div-height, 13px);border-radius:var(--loader-ellipsis-div-border-radius, 50%);background:var(--loader-dot-color, #3a4550);animation-timing-function:var(--loader-ellipsis-animation-timing, cubic-bezier(0, 1, 1, 0));}.lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(1) {left:8px;\n    animation: svelte-hezyt6-lds-ellipsis1\n      var(--brand-loader-ellipsis-animation-duration, var(--motion-duration, 0.6s)) infinite;}.lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(2) {left:8px;\n    animation: svelte-hezyt6-lds-ellipsis2\n      var(--brand-loader-ellipsis-animation-duration, var(--motion-duration, 0.6s)) infinite;}.lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(3) {left:32px;\n    animation: svelte-hezyt6-lds-ellipsis2\n      var(--brand-loader-ellipsis-animation-duration, var(--motion-duration, 0.6s)) infinite;}.lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(4) {left:56px;\n    animation: svelte-hezyt6-lds-ellipsis3\n      var(--brand-loader-ellipsis-animation-duration, var(--motion-duration, 0.6s)) infinite;}\n  @keyframes svelte-hezyt6-lds-ellipsis1 {\n    0% {\n      transform: scale(0);\n    }\n    100% {\n      transform: scale(1);\n    }\n  }\n  @keyframes svelte-hezyt6-lds-ellipsis3 {\n    0% {\n      transform: scale(1);\n    }\n    100% {\n      transform: scale(0);\n    }\n  }\n  @keyframes svelte-hezyt6-lds-ellipsis2 {\n    0% {\n      transform: translate(0, 0);\n    }\n    100% {\n      transform: translate(24px, 0);\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) {.background.svelte-hezyt6 {\n      -webkit-animation: none;\n      animation: none;}\n\n    /* Each dot's animation is declared on a `:nth-child()` selector, which\n       outranks a bare `.lds-ellipsis div` rule and comes later, so the guard\n       has to name them at the same specificity or it is silently overridden. */.lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(1),\n    .lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(2),\n    .lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(3),\n    .lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(4) {\n      /* Two of the four dots animate scale (one in, one out) and two translate.\n         With the animations stopped every transform resolves to its identity,\n         so all four sit at their `left` offsets at full size. */\n      animation: none;transform:none;}.lds-ellipsis.svelte-hezyt6 div:where(.svelte-hezyt6):nth-child(1) {\n      /* The scale-in dot shares `left: 8px` with the second one, so at rest the\n         two occupy the same spot and the row reads as three dots with one drawn\n         twice. Dropping it leaves three, evenly spaced at 8/32/56. */display:none;}\n  }"
 };
 function BrandLoader(e, t) {
-	push(t, !0), append_styles$1(e, $$css$190);
+	push(t, !0), append_styles$1(e, $$css$191);
 	let n = prop(t, "brandLogoURL", 7), i = prop(t, "brandText", 7), a = prop(t, "subText", 7), o = prop(t, "classes", 7), s = prop(t, "testId", 7);
 	var c = {
 		get brandLogoURL() {
@@ -5379,7 +5379,7 @@ function BrandLoader(e, t) {
 	}, l = root_1$92(), u = child(l), f = child(u), p = sibling(f, 2), h = child(p, !0);
 	reset(p);
 	var S = sibling(p, 2), C = (e) => {
-		var t = root$103(), n = child(t, !0);
+		var t = root$104(), n = child(t, !0);
 		reset(t), template_effect(() => set_text(n, a())), append(e, t);
 	};
 	return if_block(S, (e) => {
@@ -5397,18 +5397,18 @@ create_custom_element(BrandLoader, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/BrandLoader.wc.svelte
-var rest_excludes$93 = new Set([
+var rest_excludes$94 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$189 = {
+]), $$css$190 = {
 	hash: "svelte-x9fx7d",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-brand-loader-display, block);}"
 };
 function BrandLoader_wc(e, t) {
-	append_styles$1(e, $$css$189);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$93);
+	append_styles$1(e, $$css$190);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$94);
 	BrandLoader(e, spread_props(() => n));
 }
 customElements.define("sui-brand-loader", create_custom_element(BrandLoader_wc, {
@@ -5612,12 +5612,12 @@ var inited$1 = !1, SvelteDate = class e extends Date {
 	get size() {
 		return get(this.#n), super.size;
 	}
-}, chevron_left_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", chevron_right_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$102 = /* @__PURE__ */ from_html("<div class=\"day-name svelte-kboul8\"> </div>"), root_1$91 = /* @__PURE__ */ from_html("<button type=\"button\"> </button>"), root_2$70 = /* @__PURE__ */ from_html("<span class=\"cell outside-month svelte-kboul8\"> </span>"), root_3$61 = /* @__PURE__ */ from_html("<div role=\"application\" aria-label=\"Calendar\"><div class=\"header svelte-kboul8\"><div class=\"nav-button nav-prev svelte-kboul8\"><!></div> <span class=\"header-label svelte-kboul8\"> </span> <div class=\"nav-button nav-next svelte-kboul8\"><!></div></div> <div class=\"day-names svelte-kboul8\"></div> <div class=\"grid svelte-kboul8\" role=\"grid\"></div></div>"), $$css$188 = {
+}, chevron_left_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", chevron_right_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$103 = /* @__PURE__ */ from_html("<div class=\"day-name svelte-kboul8\"> </div>"), root_1$91 = /* @__PURE__ */ from_html("<button type=\"button\"> </button>"), root_2$70 = /* @__PURE__ */ from_html("<span class=\"cell outside-month svelte-kboul8\"> </span>"), root_3$61 = /* @__PURE__ */ from_html("<div role=\"application\" aria-label=\"Calendar\"><div class=\"header svelte-kboul8\"><div class=\"nav-button nav-prev svelte-kboul8\"><!></div> <span class=\"header-label svelte-kboul8\"> </span> <div class=\"nav-button nav-next svelte-kboul8\"><!></div></div> <div class=\"day-names svelte-kboul8\"></div> <div class=\"grid svelte-kboul8\" role=\"grid\"></div></div>"), $$css$189 = {
 	hash: "svelte-kboul8",
 	code: ".calendar.svelte-kboul8 {font-family:var(--calendar-font-family, inherit);width:var(--calendar-width, 280px);padding:var(--calendar-padding, 16px);background-color:var(--calendar-background, #ffffff);border:var(--calendar-border, 1px solid #e0e0e0);border-radius:var(--calendar-border-radius, var(--radius, 4px));box-shadow:var(--calendar-box-shadow, none);box-sizing:border-box;user-select:none;}.header.svelte-kboul8 {display:var(--calendar-header-display, flex);align-items:center;justify-content:space-between;margin-bottom:var(--calendar-header-margin-bottom, 12px);}.header-label.svelte-kboul8 {font-size:var(--calendar-header-font-size, 16px);font-weight:var(--calendar-header-font-weight, 600);color:var(--calendar-header-color, #000000);text-transform:capitalize;}.nav-button.svelte-kboul8 {display:flex;align-items:center;justify-content:center;--button-width: var(--calendar-nav-button-size, 32px);--button-height: var(--calendar-nav-button-size, 32px);--button-border: none;--button-color: transparent;--button-border-radius: var(--calendar-nav-button-border-radius, var(--radius, 4px));--button-text-color: var(--calendar-nav-button-color, #666666);--button-padding: 0;--button-hover-color: var(--calendar-nav-button-hover-background, #f0f0f0);}\n\n  /* Size the columns to the cell, not 1fr, and centre the whole grid. With 1fr\n     columns the fixed-width cells sat centred inside wider tracks, leaving\n     horizontal gaps between days — which broke the range highlight into\n     disconnected boxes instead of one continuous pill. The day-name header must\n     use the same track sizing so it stays aligned with the day grid below. */.day-names.svelte-kboul8 {display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size, 36px));justify-content:center;text-align:center;}.day-name.svelte-kboul8 {font-size:var(--calendar-day-name-font-size, 12px);font-weight:var(--calendar-day-name-font-weight, 600);color:var(--calendar-day-name-color, #595959);padding:var(--calendar-day-name-padding, 4px 0);}.grid.svelte-kboul8 {display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size, 36px));justify-content:center;row-gap:2px;}.cell.svelte-kboul8 {display:flex;align-items:center;justify-content:center;width:var(--calendar-cell-size, 36px);height:var(--calendar-cell-size, 36px);font-family:inherit;font-size:var(--calendar-cell-font-size, 14px);border-radius:var(--calendar-cell-border-radius, 50%);color:var(--calendar-cell-color, #000000);border:none;background:none;cursor:pointer;padding:0;outline:none;}.cell.svelte-kboul8:hover:not(.disabled, .outside-month, .selected, .range-start, .range-end) {background-color:var(--calendar-cell-hover-background, #f0f0f0);}.cell.svelte-kboul8:focus-visible {outline:2px solid var(--calendar-focus-ring-color, #000000);outline-offset:-2px;}.today.svelte-kboul8 {border:var(--calendar-today-border, 1px solid #000000);font-weight:var(--calendar-today-font-weight, 700);}.selected.svelte-kboul8 {background-color:var(--calendar-selected-background, #000000);color:var(--calendar-selected-color, #ffffff);}.range-start.svelte-kboul8 {background-color:var(--calendar-range-start-background, #000000);color:var(--calendar-range-start-color, #ffffff);border-radius:50% 0 0 50%;}.range-end.svelte-kboul8 {background-color:var(--calendar-range-end-background, #000000);color:var(--calendar-range-end-color, #ffffff);border-radius:0 50% 50% 0;}.range-start.range-end.svelte-kboul8 {border-radius:var(--calendar-cell-border-radius, 50%);}.in-range.svelte-kboul8 {background-color:var(--calendar-range-background, #e8e8e8);border-radius:0;}\n\n  /* #cccccc (1.61:1 on white) read as blank space, not as a disabled digit --\n     disabled controls are contrast-exempt under WCAG 1.4.3, but the demo's own\n     disabledDates run (10th-15th) is information the user must be able to read,\n     not just infer. #949494 lands near the 3:1 floor WCAG 1.4.11 uses elsewhere\n     for \"must stay perceivable\" content, while staying well short of the 4.5:1\n     enabled-text weight so disabled still reads as visually recessive. */.disabled.svelte-kboul8 {color:var(--calendar-disabled-color, #949494);cursor:var(--calendar-disabled-cursor, not-allowed);}.outside-month.svelte-kboul8 {color:var(--calendar-outside-month-color, #6b7280);cursor:default;}"
 };
 function Calendar(e, t) {
-	push(t, !0), append_styles$1(e, $$css$188);
+	push(t, !0), append_styles$1(e, $$css$189);
 	let n = prop(t, "value", 15, null), i = prop(t, "rangeStart", 15, null), a = prop(t, "rangeEnd", 15, null), o = prop(t, "mode", 7, "single"), s = prop(t, "minDate", 7, null), c = prop(t, "maxDate", 7, null), l = prop(t, "disabledDates", 23, () => []), u = prop(t, "weekStartsOn", 7, 0), f = prop(t, "locale", 7), p = prop(t, "testId", 7), h = prop(t, "previousMonthIcon", 7), S = prop(t, "nextMonthIcon", 7), C = prop(t, "onselect", 7), k = prop(t, "onrangeselect", 7), R = prop(t, "onmonthchange", 7), te = prop(t, "classes", 7), ne = prop(t, "initialMonth", 7, null), re = new SvelteDate(), G = untrack(() => {
 		let e = ne() === null ? re : ne();
 		return new SvelteDate(e.getFullYear(), e.getMonth(), 1);
@@ -5892,7 +5892,7 @@ function Calendar(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);
+		var n = root$103(), i = child(n, !0);
 		reset(n), template_effect(() => set_text(i, t)), append(e, n);
 	}), reset(At);
 	var jt = sibling(At, 2);
@@ -5943,18 +5943,18 @@ delegate(["keydown", "click"]), create_custom_element(Calendar, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Calendar.wc.svelte
-var rest_excludes$92 = new Set([
+var rest_excludes$93 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$187 = {
+]), $$css$188 = {
 	hash: "svelte-79ybll",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-calendar-display, block);}"
 };
 function Calendar_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$187);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$92), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$188);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$93), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Calendar(e, spread_props(() => n, () => get(a), {
 		previousMonthIcon: (e) => {
 			var n = comment();
@@ -6010,12 +6010,12 @@ customElements.define("sui-calendar", create_custom_element(Calendar_wc, {
 }, ["previous-month-icon", "next-month-icon"], [], { mode: "open" }));
 //#endregion
 //#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 = {
+var root$102 = /* @__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$187 = {
 	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));}\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);
+	push(t, !0), append_styles$1(e, $$css$187);
 	let n = prop(t, "views", 7), i = prop(t, "autoplay", 7, !1), a = prop(t, "autoplayInterval", 7, 1e3), o = prop(t, "showDots", 7, !1), s = prop(t, "isScrollableLast", 7, !1), c = prop(t, "onkeydown", 7), l = prop(t, "classes", 7), u = prop(t, "testId", 7), f = prop(t, "dotsWrapperTestId", 7), p = prop(t, "dotTestId", 7), h = /* @__PURE__ */ state(null), S, C, k, R, te, ne, re = /* @__PURE__ */ state(null), G = /* @__PURE__ */ state(0), be;
 	function Me() {
 		(get(G) != n().length - 1 || s()) && (update(G), Ue(), i() && at());
@@ -6122,7 +6122,7 @@ function Carousel(e, t) {
 	}, pt = root_4$49(), mt = child(pt), ht = (e) => {
 		var t = root_1$90(), i = child(t);
 		each(i, 21, n, index, (e, t) => {
-			var n = root$101();
+			var n = root$102();
 			component(child(n), () => get(t).component, (e, n) => {
 				n(e, spread_props(() => get(t).properties, { get properties() {
 					return get(t).properties;
@@ -6173,18 +6173,18 @@ delegate(["click", "keydown"]), create_custom_element(Carousel, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Carousel.wc.svelte
-var rest_excludes$91 = new Set([
+var rest_excludes$92 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$185 = {
+]), $$css$186 = {
 	hash: "svelte-19az551",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-carousel-display, block);}"
 };
 function Carousel_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$185);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$91), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$186);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$92), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Carousel(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-carousel", create_custom_element(Carousel_wc, {
@@ -6371,13 +6371,13 @@ function describeField(e, t) {
 }
 //#endregion
 //#region src/lib/assets/checkmark.svg?raw
-var checkmark_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <polyline points=\"20 6 9 17 4 12\"></polyline>\n</svg>\n", minus_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n</svg>\n", root$100 = /* @__PURE__ */ from_html("<span class=\"icon svelte-f1in4m\"></span>"), root_1$89 = /* @__PURE__ */ from_html("<span class=\"icon dash svelte-f1in4m\"></span>"), root_2$68 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-f1in4m\"> </div>"), root_3$59 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-f1in4m\"> </div>"), root_4$48 = /* @__PURE__ */ from_html("<label><input type=\"checkbox\" class=\"native-checkbox svelte-f1in4m\" aria-hidden=\"true\"/> <span><!> <!></span> <span class=\"label svelte-f1in4m\"> </span></label> <!> <!>", 1), $$css$184 = {
+var checkmark_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <polyline points=\"20 6 9 17 4 12\"></polyline>\n</svg>\n", minus_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n  <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n</svg>\n", root$101 = /* @__PURE__ */ from_html("<span class=\"icon svelte-f1in4m\"></span>"), root_1$89 = /* @__PURE__ */ from_html("<span class=\"icon dash svelte-f1in4m\"></span>"), root_2$68 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-f1in4m\"> </div>"), root_3$59 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-f1in4m\"> </div>"), root_4$48 = /* @__PURE__ */ from_html("<label><input type=\"checkbox\" class=\"native-checkbox svelte-f1in4m\" aria-hidden=\"true\"/> <span><!> <!></span> <span class=\"label svelte-f1in4m\"> </span></label> <!> <!>", 1), $$css$185 = {
 	hash: "svelte-f1in4m",
 	code: ".container.svelte-f1in4m {display:var(--checkbox-container-display, inline-flex);align-items:var(--checkbox-container-align-items, center);gap:var(--checkbox-container-gap, 8px);cursor:var(--checkbox-container-cursor, pointer);}.container.disabled.svelte-f1in4m {opacity:var(--checkbox-disabled-opacity, 0.4);cursor:var(--checkbox-disabled-cursor, not-allowed);}.native-checkbox.svelte-f1in4m {position:absolute;opacity:0;width:0;height:0;pointer-events:none;}.box.svelte-f1in4m {display:inline-flex;align-items:center;justify-content:center;width:var(--checkbox-size, 20px);height:var(--checkbox-size, 20px);border:var(--checkbox-border, 2px solid #757575);border-radius:var(--checkbox-border-radius, var(--radius, 4px));background-color:var(--checkbox-background, transparent);\n    /* --checkbox-transition wraps the WHOLE value (matching Choicebox/Toggle's\n       own \"-transition\" tokens), not just the duration -- a consumer filling it\n       with e.g. \"0.3s ease-in-out\" replaces the entire expression cleanly. Putting\n       it in only the duration slot with a separate -easing term appended after\n       would make that same override produce an invalid transition (two\n       timing-function components), dropping the whole declaration to its\n       initial value instead of just using a different timing. */transition:var(\n      --checkbox-transition,\n      background-color\n        var(--checkbox-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--checkbox-transition-easing, var(--motion-easing, ease)),\n      border var(--checkbox-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--checkbox-transition-easing, var(--motion-easing, ease))\n    );flex-shrink:0;}.box.svelte-f1in4m:focus-visible {outline:none;box-shadow:var(--checkbox-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));}.container.svelte-f1in4m:not(.disabled) .box:where(.svelte-f1in4m):hover {border-color:var(--checkbox-hover-border-color, #212121);}.box.checked.svelte-f1in4m {background-color:var(--checkbox-checked-background, #2196f3);border:var(--checkbox-checked-border, 2px solid #2196f3);}.box.indeterminate.svelte-f1in4m {background-color:var(--checkbox-indeterminate-background, #2196f3);border:var(--checkbox-indeterminate-border, 2px solid #2196f3);}.icon.svelte-f1in4m {display:inline-flex;align-items:center;justify-content:center;width:var(--checkbox-icon-size, 14px);height:var(--checkbox-icon-size, 14px);color:var(--checkbox-checkmark-color, white);}.icon.svelte-f1in4m svg {width:100%;height:100%;}.icon.dash.svelte-f1in4m {color:var(--checkbox-dash-color, white);}.label.svelte-f1in4m {font-size:var(--checkbox-label-font-size, 14px);font-weight:var(--checkbox-label-font-weight, 400);color:var(--checkbox-label-color, #212121);}.field-error.svelte-f1in4m {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-f1in4m {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}"
 };
 function Checkbox(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$184);
+	push(t, !0), append_styles$1(e, $$css$185);
 	let i = prop(t, "text", 7, ""), a = prop(t, "checked", 15, !1), o = prop(t, "disabled", 7, !1), s = prop(t, "indeterminate", 15, !1), c = prop(t, "testId", 7), l = prop(t, "checkedIcon", 7), u = prop(t, "indeterminateIcon", 7), f = prop(t, "onclick", 7), p = prop(t, "classes", 7), h = prop(t, "ariaControls", 7), S = prop(t, "ariaLabel", 7), C = prop(t, "controlled", 7, !1), k = prop(t, "attributes", 7), R = prop(t, "name", 7), te = prop(t, "value", 7), ne = prop(t, "required", 7, !1), re = prop(t, "form", 7), G = prop(t, "errorMessage", 7), be = prop(t, "infoMessage", 7), Me = prop(t, "invalid", 7, !1), Re = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: G(),
 		info: be(),
@@ -6559,7 +6559,7 @@ function Checkbox(e, t) {
 			var t = comment();
 			snippet(first_child(t), l), append(e, t);
 		}, a = (e) => {
-			var t = root$100();
+			var t = root$101();
 			html(t, () => checkmark_default, !0), reset(t), append(e, t);
 		};
 		if_block(n, (e) => {
@@ -6633,20 +6633,20 @@ delegate(["click"]), create_custom_element(Checkbox, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Checkbox.wc.svelte
-var rest_excludes$90 = new Set([
+var rest_excludes$91 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"checkboxAriaLabel",
 	"checkboxAttributes"
-]), root$99 = /* @__PURE__ */ from_html("<span class=\"icon\"></span>"), root_1$88 = /* @__PURE__ */ from_html("<span class=\"icon dash\"></span>"), $$css$183 = {
+]), root$100 = /* @__PURE__ */ from_html("<span class=\"icon\"></span>"), root_1$88 = /* @__PURE__ */ from_html("<span class=\"icon dash\"></span>"), $$css$184 = {
 	hash: "svelte-1f05d1i",
 	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. The value\n     matches this component's own root element (inline-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-checkbox-display, inline-block);}"
 };
 function Checkbox_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$183);
-	let n = prop(t, "checkboxAriaLabel", 7), i = prop(t, "checkboxAttributes", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$90), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
+	push(t, !0), append_styles$1(e, $$css$184);
+	let n = prop(t, "checkboxAriaLabel", 7), i = prop(t, "checkboxAttributes", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$91), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
 	return Checkbox(e, spread_props(() => a, () => get(s), {
 		get ariaLabel() {
 			return n();
@@ -6657,7 +6657,7 @@ function Checkbox_wc(e, t) {
 		checkedIcon: (e) => {
 			var n = comment();
 			slot(first_child(n), t, "checked-icon", {}, (e) => {
-				var t = root$99();
+				var t = root$100();
 				html(t, () => checkmark_default, !0), reset(t), append(e, t);
 			}), append(e, n);
 		},
@@ -6954,13 +6954,13 @@ function getActiveElement(e) {
 }
 //#endregion
 //#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 = {
+var root$99 = /* @__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$183 = {
 	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);}\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();
-	push(t, !0), append_styles$1(e, $$css$182);
+	push(t, !0), append_styles$1(e, $$css$183);
 	let i = prop(t, "value", 15, ""), a = prop(t, "placeholder", 7, ""), o = prop(t, "dataType", 7, "text"), s = prop(t, "label", 7, ""), c = prop(t, "onErrorMessage", 7, ""), l = prop(t, "infoMessage", 7, ""), u = prop(t, "validators", 23, () => []), f = prop(t, "disable", 7, !1), p = prop(t, "readonly", 7, !1), h = prop(t, "spellcheck", 7, null), S = prop(t, "validationPattern", 7, null), C = prop(t, "inProgressPattern", 7, null), k = prop(t, "addFocusColor", 7, !1), R = prop(t, "maxLength", 7, 1e3), te = prop(t, "minLength", 7, 0), ne = prop(t, "min", 7), re = prop(t, "max", 7), G = prop(t, "actionInput", 7, !1), be = prop(t, "useTextArea", 7, !1), Me = prop(t, "autoComplete", 7, "on"), Re = prop(t, "inputMode", 7), Ue = prop(t, "name", 7, ""), it = prop(t, "id", 7), at = prop(t, "testId", 7, ""), ot = prop(t, "textTransformers", 23, () => []), ct = prop(t, "textViewPresentation", 23, () => []), lt = prop(t, "onfocus", 7), ut = prop(t, "onfocusout", 7), dt = prop(t, "onblur", 7), ft = prop(t, "oninput", 7), pt = prop(t, "onpaste", 7), mt = prop(t, "onstatechange", 7, () => {}), ht = prop(t, "onclick", 7), gt = prop(t, "onkeydown", 7), _t = prop(t, "classes", 7), vt = prop(t, "role", 7), yt = prop(t, "ariaLabel", 7), bt = prop(t, "ariaExpanded", 7), xt = prop(t, "ariaAutocomplete", 7), St = prop(t, "ariaControls", 7), Ct = prop(t, "ariaActivedescendant", 7), wt = prop(t, "leftIcon", 7), Tt = prop(t, "rightIcon", 7), Et = prop(t, "onlefticonclick", 7), Dt = prop(t, "onrighticonclick", 7), Ot = prop(t, "leftIconLabel", 7, "Leading action"), kt = prop(t, "rightIconLabel", 7, "Trailing action"), At = prop(t, "mandatory", 7, !1), jt = prop(t, "required", 7), Mt = prop(t, "forceError", 7, !1), Nt = prop(t, "rows", 7), Pt = prop(t, "autoResize", 7, !1), It = prop(t, "minRows", 7), Lt = prop(t, "maxRows", 7), Rt = prop(t, "resize", 7, "none"), zt = prop(t, "showCount", 7, !1), Bt = /* @__PURE__ */ user_derived(() => typeof jt() == "boolean" ? jt() : At()), Ht = /* @__PURE__ */ user_derived(() => it() || (Ue() === "" ? n : `${Ue()}-${n}`)), Gt = /* @__PURE__ */ user_derived(() => typeof s() == "string" && s() !== "" && !G());
 	function qt() {
 		try {
@@ -7390,7 +7390,7 @@ function Input(e, t) {
 	{
 		let e = (e) => {
 			var t = comment(), n = first_child(t), s = (e) => {
-				var t = root$98();
+				var t = root$99();
 				remove_textarea_child(t);
 				let n, s;
 				bind_this(t, (e) => set($t, e), () => get($t)), template_effect(() => {
@@ -7590,12 +7590,12 @@ function pillToneClass(e) {
 }
 //#endregion
 //#region src/lib/Pill/Pill.svelte
-var root$97 = /* @__PURE__ */ from_html("<span class=\"pill-leading-icon svelte-13eug5u\"><!></span>"), root_1$86 = /* @__PURE__ */ from_html("<div class=\"pill-dismiss svelte-13eug5u\"><!></div>"), root_2$66 = /* @__PURE__ */ from_html("<!> <span class=\"pill-text svelte-13eug5u\"> </span> <!>", 1), $$css$181 = {
+var root$98 = /* @__PURE__ */ from_html("<span class=\"pill-leading-icon svelte-13eug5u\"><!></span>"), root_1$86 = /* @__PURE__ */ from_html("<div class=\"pill-dismiss svelte-13eug5u\"><!></div>"), root_2$66 = /* @__PURE__ */ from_html("<!> <span class=\"pill-text svelte-13eug5u\"> </span> <!>", 1), $$css$182 = {
 	hash: "svelte-13eug5u",
 	code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n    /* A pill is content-width by default. A caller stacking pills into a menu needs\n       them to fill the column and align their labels left, which is a layout choice\n       the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(\n      --pill-background,\n      var(--_pill-tone-background, var(--pill-tone-neutral-background, #e0e0e0))\n    );color:var(--pill-color, var(--_pill-tone-color, var(--pill-tone-neutral-color, #333333)));font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);letter-spacing:var(--pill-letter-spacing, normal);text-transform:var(--pill-text-transform, none);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);\n    /* Non-interactive by default: nothing is clickable, so nothing should look\n       clickable. The pointer default below applies only once role=\"button\" is\n       actually present (see handleClick / `interactive`) — an explicit\n       --pill-cursor still wins in both cases. */cursor:var(--pill-cursor, default);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill[role='button'].svelte-13eug5u,\n  button.pill.svelte-13eug5u {cursor:var(--pill-cursor, pointer);}.pill[role='button'].svelte-13eug5u:focus-visible,\n  button.pill.svelte-13eug5u:focus-visible {outline:var(--pill-focus-outline, 2px solid currentColor);outline-offset:var(--pill-focus-outline-offset, 2px);}\n\n  /* A button root arrives with user-agent styling a div never had: a default margin, the\n     native control appearance, and its own font stack. Neutralise exactly those three and\n     nothing else, so `as=\"button\"` is a semantics change and not a visual one.\n\n     Deliberately NOT `font: inherit` here: that shorthand also resets line-height, and this\n     rule outranks .pill on specificity, so it would silently override\n     `--pill-line-height` and make a button chip 5px taller than the identical div. Every\n     other typographic property is already owned by .pill and needs no restatement. */button.pill.svelte-13eug5u {margin:0;font-family:var(--pill-font-family, inherit);appearance:none;-webkit-appearance:none;}\n\n  /* Tone defaults — an internal --_pill-tone-* layer, mirroring how Button's\n     variant classes set --_btn-*: a plain --pill-background/--pill-color\n     (explicit, or via `classes`) always wins over the tone's default. */.tone-accent.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-accent-background, #d1ecf1);--_pill-tone-color: var(--pill-tone-accent-color, #0c5460);}.tone-ok.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-ok-background, #d4edda);--_pill-tone-color: var(--pill-tone-ok-color, #155724);}.tone-warn.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-warn-background, #fff3cd);--_pill-tone-color: var(--pill-tone-warn-color, #856404);}.tone-danger.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-danger-background, #f8d7da);--_pill-tone-color: var(--pill-tone-danger-color, #721c24);}.tone-muted.svelte-13eug5u {--_pill-tone-background: var(--pill-tone-muted-background, #f1f1f1);--_pill-tone-color: var(--pill-tone-muted-color, #5b626d);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(\n      --pill-hover-background,\n      var(\n        --pill-background,\n        var(--_pill-tone-background, var(--pill-tone-neutral-hover-background, #d0d0d0))\n      )\n    );color:var(\n      --pill-hover-color,\n      var(--pill-color, var(--_pill-tone-color, var(--pill-tone-neutral-hover-color, #333333)))\n    );}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}\n\n  /* Consumer themes can set Button tokens on its container, beating inherited\n     wrapper values. Pin the painting element too so the chip owns its enabled\n     glyph; leave disabled colours and focus indicators to the consumer theme. */.pill-dismiss.svelte-13eug5u .button-container,\n  .pill-dismiss.svelte-13eug5u .button-el {--button-color: transparent;--button-background: none;--button-active-background: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-border: none;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
 };
 function Pill(e, t) {
-	push(t, !0), append_styles$1(e, $$css$181);
+	push(t, !0), append_styles$1(e, $$css$182);
 	let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "tone", 7), s = prop(t, "as", 7), c = prop(t, "ariaExpanded", 7), l = prop(t, "ariaPressed", 7), u = prop(t, "testId", 7), f = prop(t, "title", 7), p = prop(t, "dismissIcon", 7), h = prop(t, "dismissLabel", 7), S = prop(t, "leadingIcon", 7), C = prop(t, "onclick", 7), k = prop(t, "ondismiss", 7), R = prop(t, "classes", 7), te = prop(t, "attrs", 7), ne = /* @__PURE__ */ user_derived(() => typeof C() == "function"), re = /* @__PURE__ */ user_derived(() => s() === "button" && !i()), G = /* @__PURE__ */ user_derived(() => get(re) ? "button" : "div"), be = /* @__PURE__ */ user_derived(() => get(ne) && !get(re)), Me = /* @__PURE__ */ user_derived(() => get(re) || get(be));
 	function Re(e) {
 		a() || C()?.(e);
@@ -7722,7 +7722,7 @@ function Pill(e, t) {
 			[CLASS]: { disabled: a() }
 		}), [() => pillToneClass(o())], void 0, void 0, "svelte-13eug5u");
 		var s = root_2$66(), C = first_child(s), k = (e) => {
-			var t = root$97();
+			var t = root$98();
 			snippet(child(t), S), reset(t), append(e, t);
 		};
 		if_block(C, (e) => {
@@ -7786,13 +7786,13 @@ create_custom_element(Pill, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/ChipInput/ChipInput.svelte
-var root$96 = /* @__PURE__ */ from_html("<div class=\"chip-input-edit-wrap svelte-umx72m\"><!></div>"), root_1$85 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-umx72m\"> </div>"), root_2$65 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-umx72m\"> </div>"), root_3$57 = /* @__PURE__ */ from_html("<div><!> <div class=\"chip-input-draft-wrap svelte-umx72m\"><!></div></div> <!> <!>", 1), $$css$180 = {
+var root$97 = /* @__PURE__ */ from_html("<div class=\"chip-input-edit-wrap svelte-umx72m\"><!></div>"), root_1$85 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-umx72m\"> </div>"), root_2$65 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-umx72m\"> </div>"), root_3$57 = /* @__PURE__ */ from_html("<div><!> <div class=\"chip-input-draft-wrap svelte-umx72m\"><!></div></div> <!> <!>", 1), $$css$181 = {
 	hash: "svelte-umx72m",
 	code: ".field-error.svelte-umx72m {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-umx72m {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}.chip-input.svelte-umx72m {display:flex;flex-wrap:var(--chip-input-flex-wrap, wrap);align-items:var(--chip-input-align-items, center);justify-content:var(--chip-input-justify-content, flex-start);gap:var(--chip-input-gap, 6px);width:var(--chip-input-width, 100%);\n\n    /* Capture the surrounding cascade's Pill and Input values under distinct names, so the\n       per-token mappings below can fall back to them. This has to happen HERE, on the root, where\n       --pill-* and --input-* have not yet been re-declared: reading them in the same declaration\n       that sets them would be a custom-property cycle and would compute to invalid. Consumers that\n       theme Pill/Input app-wide get chips that match the rest of their UI, instead of the library's\n       own values overriding their theme.\n\n       Every token that carries the chip's APPEARANCE is captured here — colour, type, spacing and\n       shape alike. An app whose Pill is a 14px, 16px-radius chip was still getting 13px and a\n       999px pill, because re-declaring a token on the element beats inheriting it no matter which\n       property it is; restoring only the colours left the same bug in a less obvious place.\n       Tokens the component owns STRUCTURALLY — the draft field's inline padding, margin and\n       shadow, and its width/height — deliberately stay fixed, since those position the field among\n       the chips rather than describe how it looks. */--chip-input-pill-background-default: var(\n      --pill-background,\n      var(--pill-tone-neutral-background, #e0e0e0)\n    );--chip-input-pill-color-default: var(--pill-color, var(--pill-tone-neutral-color, #333333));--chip-input-pill-dismiss-color-default: var(--pill-dismiss-color, currentColor);--chip-input-pill-font-size-default: var(--pill-font-size, 13px);--chip-input-pill-font-weight-default: var(--pill-font-weight, 500);--chip-input-pill-padding-default: var(--pill-padding, 6px 10px);--chip-input-pill-border-radius-default: var(--pill-border-radius, 999px);--chip-input-pill-border-default: var(--pill-border, none);--chip-input-pill-gap-default: var(--pill-gap, 4px);--chip-input-pill-dismiss-size-default: var(--pill-dismiss-size, 14px);--chip-input-pill-max-width-default: var(--pill-max-width);--chip-input-draft-border-default: var(--input-border, 1px solid transparent);--chip-input-draft-focus-border-default: var(--input-focus-border, 1px solid transparent);--chip-input-draft-radius-default: var(--input-radius, 4px);--chip-input-draft-font-size-default: var(--input-font-size, 13px);}.chip-input-draft-wrap.svelte-umx72m {flex:var(--chip-input-draft-flex, 0 1 auto);}.chip-input-edit-wrap.svelte-umx72m {flex:var(--chip-input-edit-flex, 0 1 auto);}.chip-input.svelte-umx72m .chip-input-pill {--pill-gap: var(--chip-input-pill-gap, var(--chip-input-pill-gap-default));--pill-background: var(--chip-input-pill-background, var(--chip-input-pill-background-default));--pill-color: var(--chip-input-pill-color, var(--chip-input-pill-color-default));--pill-font-size: var(--chip-input-pill-font-size, var(--chip-input-pill-font-size-default));--pill-font-weight: var(\n      --chip-input-pill-font-weight,\n      var(--chip-input-pill-font-weight-default)\n    );--pill-padding: var(--chip-input-pill-padding, var(--chip-input-pill-padding-default));--pill-border-radius: var(\n      --chip-input-pill-border-radius,\n      var(--chip-input-pill-border-radius-default)\n    );--pill-border: var(--chip-input-pill-border, var(--chip-input-pill-border-default));--pill-max-width: var(--chip-input-pill-max-width, var(--chip-input-pill-max-width-default));--pill-dismiss-size: var(\n      --chip-input-pill-dismiss-size,\n      var(--chip-input-pill-dismiss-size-default)\n    );--pill-dismiss-color: var(\n      --chip-input-pill-dismiss-color,\n      var(--chip-input-pill-dismiss-color-default)\n    );}.chip-input-draft-wrap.svelte-umx72m .chip-input-draft {--input-width: var(--chip-input-draft-width, 90px);--input-height: var(--chip-input-draft-height, 28px);--input-border: var(--chip-input-draft-border, var(--chip-input-draft-border-default));--input-radius: var(--chip-input-draft-radius, var(--chip-input-draft-radius-default));--input-focus-border: var(\n      --chip-input-draft-focus-border,\n      var(--chip-input-draft-focus-border-default)\n    );--input-font-size: var(--chip-input-draft-font-size, var(--chip-input-draft-font-size-default));\n\n    /* Structural, not thematic: the draft field sits inline among the chips, so it keeps its own\n       tight padding and no margin or shadow regardless of how the app themes Input elsewhere.\n       Override them per-instance via --chip-input-draft-* if a layout genuinely needs it. */--input-padding: var(--chip-input-draft-padding, 0 2px);--input-margin: 0;--input-box-shadow: none;}\n\n  /* The in-place edit field replaces a Pill for the duration of one edit, so it reuses the same\n     captured --input-* cascade (--chip-input-draft-*-default, above) the draft field maps from --\n     an app that themes Input app-wide gets a matching edit field for free. Only sizing/padding\n     get their own --chip-input-edit-* tokens: the field holds an EXISTING (often longer) value\n     rather than a short in-progress draft, so it defaults wider. */.chip-input-edit-wrap.svelte-umx72m .chip-input-edit {--input-width: var(--chip-input-edit-width, 110px);--input-height: var(--chip-input-edit-height, 28px);\n    /* Fall through the DRAFT token before the captured default: the edit field is the same\n       control as the draft field, wearing the same clothes, so a consumer who themed the draft\n       with --chip-input-draft-* must get a matching edit field without naming it twice. */--input-border: var(\n      --chip-input-edit-border,\n      var(--chip-input-draft-border, var(--chip-input-draft-border-default))\n    );--input-radius: var(\n      --chip-input-edit-radius,\n      var(--chip-input-draft-radius, var(--chip-input-draft-radius-default))\n    );--input-focus-border: var(\n      --chip-input-edit-focus-border,\n      var(--chip-input-draft-focus-border, var(--chip-input-draft-focus-border-default))\n    );--input-font-size: var(\n      --chip-input-edit-font-size,\n      var(--chip-input-draft-font-size, var(--chip-input-draft-font-size-default))\n    );--input-padding: var(--chip-input-edit-padding, 0 8px);--input-margin: 0;--input-box-shadow: none;}"
 };
 function ChipInput(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$180);
+	push(t, !0), append_styles$1(e, $$css$181);
 	let i = prop(t, "values", 31, () => proxy([])), a = prop(t, "ariaLabel", 7), o = prop(t, "placeholder", 7, "Add value…"), s = prop(t, "disabled", 7, !1), c = prop(t, "editable", 7, !1), l = prop(t, "testId", 7), u = prop(t, "classes", 7), f = prop(t, "errorMessage", 7), p = prop(t, "infoMessage", 7), h = prop(t, "invalid", 7, !1), S = prop(t, "onadd", 7), C = prop(t, "ondismiss", 7), k = prop(t, "onedit", 7), R = prop(t, "onchange", 7), te = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: f(),
 		info: p(),
@@ -7926,7 +7926,7 @@ function ChipInput(e, t) {
 	}, ft = root_3$57(), pt = first_child(ft), mt = child(pt);
 	each(mt, 18, i, (e) => e, (e, t, n) => {
 		var i = comment(), a = first_child(i), o = (e) => {
-			var i = root$96();
+			var i = root$97();
 			bind_this(Input(child(i), spread_props({
 				get value() {
 					return get(be);
@@ -8031,20 +8031,20 @@ create_custom_element(ChipInput, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/ChipInput.wc.svelte
-var rest_excludes$89 = new Set([
+var rest_excludes$90 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"chipInputAriaLabel",
 	"values"
-]), $$css$179 = {
+]), $$css$180 = {
 	hash: "svelte-1pj30ph",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-chip-input-display, block);}"
 };
 function ChipInput_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$179);
-	let n = prop(t, "chipInputAriaLabel", 7), i = prop(t, "values", 31, () => proxy([])), a = /* @__PURE__ */ rest_props(t, rest_excludes$89), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
+	push(t, !0), append_styles$1(e, $$css$180);
+	let n = prop(t, "chipInputAriaLabel", 7), i = prop(t, "values", 31, () => proxy([])), a = /* @__PURE__ */ rest_props(t, rest_excludes$90), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
 	return ChipInput(e, spread_props(() => a, () => get(s), {
 		get ariaLabel() {
 			return n();
@@ -8160,13 +8160,13 @@ function closestInEventPath(e, t) {
 }
 //#endregion
 //#region src/lib/Slider/Slider.svelte
-var root$95 = /* @__PURE__ */ from_html("<span class=\"slider-value svelte-17e64va\"> </span>"), root_1$84 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-17e64va\"> </div>"), root_2$64 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-17e64va\"> </div>"), root_3$56 = /* @__PURE__ */ from_html("<div><input type=\"range\" class=\"slider-input svelte-17e64va\"/> <!></div> <!> <!>", 1), $$css$178 = {
+var root$96 = /* @__PURE__ */ from_html("<span class=\"slider-value svelte-17e64va\"> </span>"), root_1$84 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-17e64va\"> </div>"), root_2$64 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-17e64va\"> </div>"), root_3$56 = /* @__PURE__ */ from_html("<div><input type=\"range\" class=\"slider-input svelte-17e64va\"/> <!></div> <!> <!>", 1), $$css$179 = {
 	hash: "svelte-17e64va",
 	code: ".slider-container.svelte-17e64va {display:flex;align-items:center;gap:12px;width:var(--slider-container-width, 100%);padding:var(--slider-container-padding, 4px 0);}.slider-container.disabled.svelte-17e64va {opacity:var(--slider-disabled-opacity, 0.5);cursor:var(--slider-disabled-cursor, not-allowed);}.slider-input.svelte-17e64va {-webkit-appearance:none;appearance:none;width:100%;height:var(--slider-track-height, 6px);border-radius:var(--slider-track-border-radius, var(--radius, 4px));background:var(\n      --slider-track,\n      linear-gradient(\n        to right,\n        var(--slider-track-active-color, #2196f3) 0%,\n        var(--slider-track-active-color, #2196f3) var(--slider-fill-percent, 0%),\n        var(--slider-track-background, #e0e0e0) var(--slider-fill-percent, 0%),\n        var(--slider-track-background, #e0e0e0) 100%\n      )\n    );outline:none;transition:var(\n      --slider-transition,\n      background\n        var(--slider-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--slider-transition-easing, var(--motion-easing, ease))\n    );cursor:pointer;}.slider-container.disabled.svelte-17e64va .slider-input:where(.svelte-17e64va) {cursor:var(--slider-disabled-cursor, not-allowed);pointer-events:none;}.slider-input.svelte-17e64va::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:var(--slider-thumb-size, 20px);height:var(--slider-thumb-size, 20px);border-radius:var(--slider-thumb-border-radius, 50%);background:var(--slider-thumb-background, #ffffff);border:var(--slider-thumb-border, 2px solid #2196f3);box-shadow:var(--slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));opacity:var(--slider-thumb-opacity, 1);cursor:pointer;transition:transform\n        var(\n          --slider-thumb-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--slider-thumb-transition-easing, var(--motion-easing, ease)),\n      opacity\n        var(\n          --slider-thumb-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--slider-thumb-transition-easing, var(--motion-easing, ease));}.slider-input.svelte-17e64va::-moz-range-thumb {width:var(--slider-thumb-size, 20px);height:var(--slider-thumb-size, 20px);border-radius:var(--slider-thumb-border-radius, 50%);background:var(--slider-thumb-background, #ffffff);border:var(--slider-thumb-border, 2px solid #2196f3);box-shadow:var(--slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));opacity:var(--slider-thumb-opacity, 1);cursor:pointer;transition:transform\n        var(\n          --slider-thumb-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--slider-thumb-transition-easing, var(--motion-easing, ease)),\n      opacity\n        var(\n          --slider-thumb-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--slider-thumb-transition-easing, var(--motion-easing, ease));}.slider-input.svelte-17e64va:hover::-webkit-slider-thumb {transform:scale(var(--slider-thumb-hover-scale, 1.15));opacity:var(--slider-thumb-hover-opacity, var(--slider-thumb-opacity, 1));}.slider-input.svelte-17e64va:hover::-moz-range-thumb {transform:scale(var(--slider-thumb-hover-scale, 1.15));opacity:var(--slider-thumb-hover-opacity, var(--slider-thumb-opacity, 1));}.slider-input.svelte-17e64va:focus-visible::-webkit-slider-thumb {outline:var(--slider-focus-ring, 2px solid #2196f3);outline-offset:2px;}.slider-input.svelte-17e64va:focus-visible::-moz-range-thumb {outline:var(--slider-focus-ring, 2px solid #2196f3);outline-offset:2px;}.slider-input.svelte-17e64va::-moz-range-track {height:var(--slider-track-height, 6px);border-radius:var(--slider-track-border-radius, var(--radius, 4px));background:transparent;}.slider-value.svelte-17e64va {font-size:var(--slider-value-font-size, 14px);font-weight:var(--slider-value-font-weight, 500);color:var(--slider-value-color, #333333);white-space:nowrap;}.field-error.svelte-17e64va {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-17e64va {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}"
 };
 function Slider(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$178);
+	push(t, !0), append_styles$1(e, $$css$179);
 	let i = prop(t, "value", 15, 0), a = prop(t, "min", 7, 0), o = prop(t, "max", 7, 100), s = prop(t, "step", 7, 1), c = prop(t, "disabled", 7, !1), l = prop(t, "showValue", 7, !1), u = prop(t, "labelFormatter", 7), f = prop(t, "ariaLabel", 7), p = prop(t, "ariaLabelledby", 7), h = prop(t, "testId", 7), S = prop(t, "onchange", 7), C = prop(t, "oninput", 7), k = prop(t, "classes", 7), R = prop(t, "ariaValueText", 7), te = prop(t, "name", 7), ne = prop(t, "form", 7), re = prop(t, "errorMessage", 7), G = prop(t, "infoMessage", 7), be = prop(t, "invalid", 7, !1), Me = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: re(),
 		info: G(),
@@ -8308,7 +8308,7 @@ function Slider(e, t) {
 	var ft = child(ut);
 	remove_input_defaults(ft);
 	var pt = sibling(ft, 2), mt = (e) => {
-		var t = root$95(), n = child(t, !0);
+		var t = root$96(), n = child(t, !0);
 		reset(t), template_effect(() => set_text(n, get(Ue))), append(e, t);
 	};
 	if_block(pt, (e) => {
@@ -8358,13 +8358,13 @@ delegate(["input", "change"]), create_custom_element(Slider, {
 }, [], [], { mode: "open" });
 //#endregion
 //#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 = {
+var root$95 = /* @__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$178 = {
 	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, #6b7280);flex-shrink:0;}"
 };
 function SplitInput(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$177);
+	push(t, !0), append_styles$1(e, $$css$178);
 	let i = prop(t, "values", 31, () => proxy([])), a = prop(t, "fields", 7), o = prop(t, "length", 7, 4), s = prop(t, "disabled", 7, !1), c = prop(t, "autoAdvance", 7, !1), l = prop(t, "separator", 7), u = prop(t, "testId", 7), f = prop(t, "classes", 7), p = prop(t, "ariaLabel", 7), h = prop(t, "errorMessage", 7), S = prop(t, "infoMessage", 7), C = prop(t, "invalid", 7, !1), k = prop(t, "onchange", 7), R = prop(t, "oninput", 7), te = prop(t, "oncomplete", 7), ne = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: h(),
 		info: S(),
@@ -8535,7 +8535,7 @@ function SplitInput(e, t) {
 	}, gt = root_5$38(), _t = first_child(gt);
 	each(_t, 21, () => get(Me), index, (e, t, n) => {
 		var i = root_2$63(), a = first_child(i), o = (e) => {
-			var t = root$94(), n = child(t, !0);
+			var t = root$95(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, l())), append(e, t);
 		};
 		if_block(a, (e) => {
@@ -8636,13 +8636,13 @@ create_custom_element(SplitInput, {
 }, [], ["clear", "focus"], { mode: "open" });
 //#endregion
 //#region src/lib/assets/swap-vertical.svg?raw
-var swap_vertical_default = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M7 4v16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M3 8l4-4 4 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M17 20V4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M13 16l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$93 = /* @__PURE__ */ from_html("<span class=\"color-picker-label svelte-ka7yhu\"> </span>"), root_1$82 = /* @__PURE__ */ from_html("<span class=\"color-picker-checkerboard svelte-ka7yhu\"><span class=\"color-picker-swatch svelte-ka7yhu\"></span></span>"), root_2$62 = /* @__PURE__ */ from_html("<div class=\"color-picker-input-wrap svelte-ka7yhu\"><!></div>"), root_3$54 = /* @__PURE__ */ from_html("<div class=\"cp-field-hex svelte-ka7yhu\"><!> <span class=\"cp-field-label svelte-ka7yhu\">HEX</span></div>"), root_4$45 = /* @__PURE__ */ from_html("<div class=\"color-picker-popover svelte-ka7yhu\" role=\"dialog\" aria-label=\"Color picker\"><div class=\"cp-sat-panel svelte-ka7yhu\" role=\"slider\" aria-label=\"Saturation and brightness\"><div class=\"cp-sat-white svelte-ka7yhu\"></div> <div class=\"cp-sat-black svelte-ka7yhu\"></div> <div class=\"cp-sat-thumb svelte-ka7yhu\"></div></div> <div class=\"cp-hue-slider svelte-ka7yhu\"><!></div> <div class=\"cp-inputs svelte-ka7yhu\"><div class=\"cp-preview svelte-ka7yhu\"></div> <!> <div class=\"cp-mode-toggle svelte-ka7yhu\"><!></div></div></div>"), root_5$37 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-ka7yhu\"> </div>"), root_6$32 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-ka7yhu\"> </div>"), root_7$29 = /* @__PURE__ */ from_html("<div><!> <div class=\"color-picker-row svelte-ka7yhu\"><div><!></div> <!></div> <!></div> <!> <!>", 1), $$css$176 = {
+var swap_vertical_default = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M7 4v16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M3 8l4-4 4 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M17 20V4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <path d=\"M13 16l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$94 = /* @__PURE__ */ from_html("<span class=\"color-picker-label svelte-ka7yhu\"> </span>"), root_1$82 = /* @__PURE__ */ from_html("<span class=\"color-picker-checkerboard svelte-ka7yhu\"><span class=\"color-picker-swatch svelte-ka7yhu\"></span></span>"), root_2$62 = /* @__PURE__ */ from_html("<div class=\"color-picker-input-wrap svelte-ka7yhu\"><!></div>"), root_3$54 = /* @__PURE__ */ from_html("<div class=\"cp-field-hex svelte-ka7yhu\"><!> <span class=\"cp-field-label svelte-ka7yhu\">HEX</span></div>"), root_4$45 = /* @__PURE__ */ from_html("<div class=\"color-picker-popover svelte-ka7yhu\" role=\"dialog\" aria-label=\"Color picker\"><div class=\"cp-sat-panel svelte-ka7yhu\" role=\"slider\" aria-label=\"Saturation and brightness\"><div class=\"cp-sat-white svelte-ka7yhu\"></div> <div class=\"cp-sat-black svelte-ka7yhu\"></div> <div class=\"cp-sat-thumb svelte-ka7yhu\"></div></div> <div class=\"cp-hue-slider svelte-ka7yhu\"><!></div> <div class=\"cp-inputs svelte-ka7yhu\"><div class=\"cp-preview svelte-ka7yhu\"></div> <!> <div class=\"cp-mode-toggle svelte-ka7yhu\"><!></div></div></div>"), root_5$37 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-ka7yhu\"> </div>"), root_6$32 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-ka7yhu\"> </div>"), root_7$29 = /* @__PURE__ */ from_html("<div><!> <div class=\"color-picker-row svelte-ka7yhu\"><div><!></div> <!></div> <!></div> <!> <!>", 1), $$css$177 = {
 	hash: "svelte-ka7yhu",
 	code: ".field-error.svelte-ka7yhu {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-ka7yhu {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}\n\n  /* ── Container ─────────────────────────────────────────────── */.color-picker-container.svelte-ka7yhu {display:flex;flex-direction:column;gap:var(--color-picker-gap, 8px);width:var(--color-picker-width, fit-content);position:relative;}.color-picker-container.disabled.svelte-ka7yhu {opacity:var(--color-picker-disabled-opacity, 0.5);cursor:not-allowed;}.color-picker-label.svelte-ka7yhu {font-size:var(--color-picker-label-font-size, 13px);font-weight:var(--color-picker-label-font-weight, 500);color:var(--color-picker-label-color, #374151);letter-spacing:var(--color-picker-label-letter-spacing, 0.01em);}\n\n  /* ── Trigger row ───────────────────────────────────────────── */.color-picker-row.svelte-ka7yhu {display:flex;align-items:center;gap:var(--color-picker-row-gap, 0px);}.color-picker-swatch-btn.svelte-ka7yhu {--button-color: var(--color-picker-swatch-btn-background, #f9fafb);--button-border: var(--color-picker-swatch-btn-border, 1px solid #d1d5db);--button-border-radius: var(\n      --color-picker-swatch-btn-border-radius,\n      var(--radius, 4px) 0 0 var(--radius, 4px)\n    );--button-hover-color: var(--color-picker-swatch-btn-hover-background, #f3f4f6);--button-padding: var(--color-picker-swatch-padding, 5px);--button-width: fit-content;flex-shrink:0;}.color-picker-swatch-btn.standalone.svelte-ka7yhu {--button-border-radius: var(--color-picker-swatch-btn-border-radius, var(--radius, 4px));}.color-picker-checkerboard.svelte-ka7yhu {display:block;width:var(--color-picker-swatch-size, 26px);height:var(--color-picker-swatch-size, 26px);border-radius:var(--color-picker-swatch-border-radius, var(--radius, 4px));overflow:hidden;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%),\n      linear-gradient(-45deg, #ccc 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, #ccc 75%),\n      linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0,\n      0 4px,\n      4px -4px,\n      -4px 0px;flex-shrink:0;}.color-picker-swatch.svelte-ka7yhu {display:block;width:100%;height:100%;border-radius:inherit;box-shadow:var(--color-picker-swatch-inner-shadow, inset 0 0 0 1px rgba(0, 0, 0, 0.08));}.color-picker-input-wrap.svelte-ka7yhu {flex:1;min-width:0;}.color-picker-input-wrap.svelte-ka7yhu .color-picker-text-input {--input-border: 1px solid #d1d5db;--input-radius: 0 10px 10px 0;--input-margin: 0;--input-padding: 8px 12px;--input-font-size: 13px;--input-font-weight: 500;--input-font-family: var(\n      --color-picker-mono-font,\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace\n    );--input-box-shadow: none;--input-width: 100%;--input-height: var(--color-picker-input-height, 38px);--input-text-transform: var(--color-picker-value-text-transform, none);margin-left:-1px;}\n\n  /* ── Popover ───────────────────────────────────────────────── */.color-picker-popover.svelte-ka7yhu {position:absolute;top:100%;left:0;z-index:var(--color-picker-popover-z-index, 50);margin-top:6px;width:var(--color-picker-popover-width, 280px);padding:var(--color-picker-popover-padding, 12px);background:var(--color-picker-popover-background, #ffffff);border:var(--color-picker-popover-border, 1px solid #e5e7eb);border-radius:var(--color-picker-popover-border-radius, var(--radius, 4px));box-shadow:var(\n      --color-picker-popover-shadow,\n      0 4px 24px rgba(0, 0, 0, 0.12),\n      0 1px 4px rgba(0, 0, 0, 0.06)\n    );display:flex;flex-direction:column;gap:12px;touch-action:none;}\n\n  /* ── Saturation / brightness panel ─────────────────────────── */.cp-sat-panel.svelte-ka7yhu {position:relative;width:100%;aspect-ratio:1 / 0.7;border-radius:var(--color-picker-panel-border-radius, var(--radius, 4px));cursor:crosshair;overflow:hidden;user-select:none;}.cp-sat-white.svelte-ka7yhu {position:absolute;inset:0;background:linear-gradient(to right, #ffffff, transparent);border-radius:inherit;}.cp-sat-black.svelte-ka7yhu {position:absolute;inset:0;background:linear-gradient(to bottom, transparent, #000000);border-radius:inherit;}.cp-sat-thumb.svelte-ka7yhu {position:absolute;width:16px;height:16px;border-radius:50%;border:2.5px solid #ffffff;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.15),\n      0 1px 4px rgba(0, 0, 0, 0.3);transform:translate(-50%, -50%);pointer-events:none;}\n\n  /* ── Hue slider ────────────────────────────────────────────── */.cp-hue-slider.svelte-ka7yhu {--slider-container-padding: 0;--slider-track: linear-gradient(\n      to right,\n      #ff0000 0%,\n      #ffff00 16.67%,\n      #00ff00 33.33%,\n      #00ffff 50%,\n      #0000ff 66.67%,\n      #ff00ff 83.33%,\n      #ff0000 100%\n    );--slider-track-height: 14px;--slider-track-border-radius: 7px;--slider-thumb-size: 18px;--slider-thumb-background: #ffffff;--slider-thumb-border: 2.5px solid #ffffff;--slider-thumb-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.25);}\n\n  /* ── Input fields ──────────────────────────────────────────── */.cp-inputs.svelte-ka7yhu {display:flex;align-items:flex-start;gap:6px;}.cp-preview.svelte-ka7yhu {width:36px;height:36px;border-radius:6px;border:1px solid rgba(0, 0, 0, 0.08);flex-shrink:0;}.cp-field-hex.svelte-ka7yhu {display:flex;flex-direction:column;align-items:center;gap:3px;flex:3;min-width:0;}.cp-field-hex.svelte-ka7yhu .cp-field-input {--input-border: 1px solid var(--color-picker-field-border, #d1d5db);--input-radius: 6px;--input-margin: 0;--input-padding: 0 6px;--input-font-size: 12px;--input-font-weight: 500;--input-font-family: var(\n      --color-picker-mono-font,\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace\n    );--input-text-color: var(--color-picker-field-color, #374151);--input-background: var(--color-picker-field-background, #ffffff);--input-box-shadow: none;--input-width: 100%;--input-height: 32px;--input-text-align: center;--input-focus-border: 1px solid var(--color-picker-field-focus-border, #3b82f6);--input-text-transform: var(--color-picker-value-text-transform, none);}.cp-split-input.svelte-ka7yhu {--field-group-gap: 6px;--field-group-border: 1px solid var(--color-picker-field-border, #d1d5db);--field-group-border-radius: 6px;--field-group-focus-border: 1px solid var(--color-picker-field-focus-border, #3b82f6);--field-group-input-height: 32px;--field-group-font-size: 12px;--field-group-font-weight: 500;--field-group-font-family: var(\n      --color-picker-mono-font,\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      monospace\n    );--field-group-label-color: var(--color-picker-field-label-color, #9ca3af);flex:1;min-width:0;}.cp-field-label.svelte-ka7yhu {font-size:10px;font-weight:500;color:var(--color-picker-field-label-color, #9ca3af);text-transform:uppercase;letter-spacing:0.05em;}.cp-mode-toggle.svelte-ka7yhu {--button-color: var(--color-picker-field-background, #ffffff);--button-border: 1px solid var(--color-picker-field-border, #d1d5db);--button-border-radius: 6px;--button-padding: 0;--button-width: 28px;--button-height: 32px;--button-text-color: var(--color-picker-field-label-color, #9ca3af);--button-hover-color: var(--color-picker-field-background, #ffffff);--button-hover-border: 1px solid var(--color-picker-field-focus-border, #3b82f6);--button-hover-text-color: var(--color-picker-field-color, #374151);flex-shrink:0;}"
 };
 function ColorPicker(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$176);
+	push(t, !0), append_styles$1(e, $$css$177);
 	let i = prop(t, "value", 15, "#000000"), a = prop(t, "label", 7), o = prop(t, "disabled", 7, !1), s = prop(t, "showValue", 7, !1), c = prop(t, "testId", 7), l = prop(t, "onchange", 7), u = prop(t, "oninput", 7), f = prop(t, "classes", 7), p = prop(t, "errorMessage", 7), h = prop(t, "infoMessage", 7), S = prop(t, "invalid", 7, !1), C = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: p(),
 		info: h(),
@@ -8816,7 +8816,7 @@ function ColorPicker(e, t) {
 	}, kt = root_7$29(), At = first_child(kt);
 	let jt;
 	var Mt = child(At), Nt = (e) => {
-		var t = root$93(), n = child(t, !0);
+		var t = root$94(), n = child(t, !0);
 		reset(t), template_effect(() => set_text(n, a())), append(e, t);
 	};
 	if_block(Mt, (e) => {
@@ -9031,19 +9031,19 @@ delegate([
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/ColorPicker.wc.svelte
-var rest_excludes$88 = new Set([
+var rest_excludes$89 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"value"
-]), $$css$175 = {
+]), $$css$176 = {
 	hash: "svelte-1luqajc",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-color-picker-display, block);}"
 };
 function ColorPicker_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$175);
-	let n = prop(t, "value", 15, "#000000"), i = /* @__PURE__ */ rest_props(t, rest_excludes$88), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
+	push(t, !0), append_styles$1(e, $$css$176);
+	let n = prop(t, "value", 15, "#000000"), i = /* @__PURE__ */ rest_props(t, rest_excludes$89), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
 	return ColorPicker(e, spread_props(() => i, () => get(o), {
 		get value() {
 			return n();
@@ -9100,13 +9100,13 @@ customElements.define("sui-color-picker", create_custom_element(ColorPicker_wc,
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Combobox/Combobox.svelte
-var root$92 = /* @__PURE__ */ from_html("<div class=\"combobox-input-prefix svelte-178p70i\"><!></div>"), root_1$81 = /* @__PURE__ */ from_html("<div class=\"combobox-input-suffix svelte-178p70i\"><!></div>"), root_2$61 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown-header svelte-178p70i\"><!></div>"), root_3$53 = /* @__PURE__ */ from_html("<div class=\"combobox-limit svelte-178p70i\" role=\"alert\"> </div>"), root_4$44 = /* @__PURE__ */ from_html("<div class=\"combobox-empty svelte-178p70i\"> </div>"), root_5$36 = /* @__PURE__ */ from_html("<div role=\"option\" tabindex=\"-1\"><!></div>"), root_6$31 = /* @__PURE__ */ from_html("<div role=\"option\" aria-selected=\"false\" tabindex=\"-1\"><span class=\"combobox-create-icon svelte-178p70i\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" fill=\"none\"><path d=\"M10 4v12M4 10h12\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"></path></svg></span> </div>"), root_7$28 = /* @__PURE__ */ from_html("<span class=\"combobox-action-icon svelte-178p70i\" aria-hidden=\"true\"><!></span>"), root_8$23 = /* @__PURE__ */ from_html("<div role=\"option\" aria-selected=\"false\" tabindex=\"-1\"><!> </div>"), root_9$19 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown-footer svelte-178p70i\"><!></div>"), root_10$16 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown svelte-178p70i\" role=\"listbox\"><!> <!> <!> <!> <!></div>"), root_11$14 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-178p70i\"> </div>"), root_12$13 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-178p70i\"> </div>"), root_13$11 = /* @__PURE__ */ from_html("<div><div><!> <!> <div class=\"combobox-input svelte-178p70i\"><!></div> <!></div> <!></div> <!> <!>", 1), $$css$174 = {
+var root$93 = /* @__PURE__ */ from_html("<div class=\"combobox-input-prefix svelte-178p70i\"><!></div>"), root_1$81 = /* @__PURE__ */ from_html("<div class=\"combobox-input-suffix svelte-178p70i\"><!></div>"), root_2$61 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown-header svelte-178p70i\"><!></div>"), root_3$53 = /* @__PURE__ */ from_html("<div class=\"combobox-limit svelte-178p70i\" role=\"alert\"> </div>"), root_4$44 = /* @__PURE__ */ from_html("<div class=\"combobox-empty svelte-178p70i\"> </div>"), root_5$36 = /* @__PURE__ */ from_html("<div role=\"option\" tabindex=\"-1\"><!></div>"), root_6$31 = /* @__PURE__ */ from_html("<div role=\"option\" aria-selected=\"false\" tabindex=\"-1\"><span class=\"combobox-create-icon svelte-178p70i\" aria-hidden=\"true\"><svg viewBox=\"0 0 20 20\" width=\"14\" height=\"14\" fill=\"none\"><path d=\"M10 4v12M4 10h12\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\"></path></svg></span> </div>"), root_7$28 = /* @__PURE__ */ from_html("<span class=\"combobox-action-icon svelte-178p70i\" aria-hidden=\"true\"><!></span>"), root_8$23 = /* @__PURE__ */ from_html("<div role=\"option\" aria-selected=\"false\" tabindex=\"-1\"><!> </div>"), root_9$19 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown-footer svelte-178p70i\"><!></div>"), root_10$16 = /* @__PURE__ */ from_html("<div class=\"combobox-dropdown svelte-178p70i\" role=\"listbox\"><!> <!> <!> <!> <!></div>"), root_11$14 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-178p70i\"> </div>"), root_12$13 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-178p70i\"> </div>"), root_13$11 = /* @__PURE__ */ from_html("<div><div><!> <!> <div class=\"combobox-input svelte-178p70i\"><!></div> <!></div> <!></div> <!> <!>", 1), $$css$175 = {
 	hash: "svelte-178p70i",
 	code: ".field-error.svelte-178p70i {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-178p70i {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}.combobox.svelte-178p70i {position:relative;width:var(--combobox-width, 100%);font-family:var(--combobox-font-family, inherit);font-size:var(--combobox-font-size, 14px);color:var(--combobox-color, #333333);}.combobox.disabled.svelte-178p70i {opacity:var(--combobox-disabled-opacity, 0.5);cursor:var(--combobox-disabled-cursor, not-allowed);pointer-events:none;}.combobox-input-wrapper.svelte-178p70i {display:flex;align-items:center;background:var(--combobox-input-background, #ffffff);border:var(--combobox-input-border, 1px solid #cccccc);border-radius:var(--combobox-input-border-radius, var(--radius, 4px));transition:var(\n      --combobox-input-transition,\n      border-color\n        var(\n          --combobox-input-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--combobox-input-transition-easing, var(--motion-easing, ease)),\n      box-shadow\n        var(\n          --combobox-input-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--combobox-input-transition-easing, var(--motion-easing, ease))\n    );}\n\n  /* Multi-select control: pills wrap above the typeahead input. */.combobox-input-wrapper.multiple.svelte-178p70i {flex-wrap:wrap;gap:var(--combobox-pill-gap, 4px);padding:var(--combobox-multiple-padding, 4px 6px);cursor:text;}.combobox-input-wrapper.svelte-178p70i:hover {border-color:var(--combobox-input-hover-border-color, #999999);}.combobox-input-wrapper.svelte-178p70i:focus-within {border-color:var(--combobox-input-focus-border-color, #2563eb);box-shadow:var(--combobox-input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.2));}.combobox-input-prefix.svelte-178p70i {display:flex;align-items:center;padding-left:var(--combobox-input-prefix-padding, 8px);flex-shrink:0;}.combobox-input-suffix.svelte-178p70i {display:flex;align-items:center;padding-right:var(--combobox-input-suffix-padding, 8px);flex-shrink:0;}.combobox-input.svelte-178p70i {flex:1;min-width:0;--input-border: none;--input-focus-border: none;--input-box-shadow: none;--input-margin: 0;--input-width: 100%;--input-padding: var(--combobox-input-padding, 8px 12px);--input-background: transparent;--input-font-size: inherit;--input-font-family: inherit;--input-font-weight: inherit;--input-text-color: inherit;--input-radius: 0;}.combobox-input-wrapper.multiple.svelte-178p70i .combobox-input:where(.svelte-178p70i) {flex:1 1 60px;min-width:60px;--input-padding: var(--combobox-multiple-input-padding, 2px 4px);}.combobox-input.svelte-178p70i::placeholder {color:var(--combobox-placeholder-color, #999999);}.combobox-dropdown.svelte-178p70i {position:absolute;top:var(--combobox-dropdown-top, 100%);left:var(--combobox-dropdown-left, 0);right:var(--combobox-dropdown-right, 0);margin-top:var(--combobox-dropdown-gap, 4px);background:var(--combobox-dropdown-background, #ffffff);border:var(--combobox-dropdown-border, 1px solid #cccccc);border-radius:var(--combobox-dropdown-border-radius, var(--radius, 4px));box-shadow:var(--combobox-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));max-height:var(--combobox-dropdown-max-height, 200px);overflow-y:auto;z-index:var(--combobox-dropdown-z-index, 10);padding:var(--combobox-dropdown-padding, 0);}.combobox-option.svelte-178p70i {display:flex;align-items:center;gap:var(--combobox-option-gap, 8px);padding:var(--combobox-option-padding, 8px 12px);color:var(--combobox-option-color, #333333);font-size:var(--combobox-option-font-size, inherit);font-weight:var(--combobox-option-font-weight, inherit);cursor:pointer;transition:background var(--combobox-option-transition-duration, var(--motion-duration, 0.1s))\n      var(--combobox-option-transition-easing, var(--motion-easing, ease));}.combobox-option.svelte-178p70i:hover,\n  .combobox-option.highlighted.svelte-178p70i {background:var(--combobox-option-hover-background, #f0f0f0);color:var(--combobox-option-hover-color, var(--combobox-option-color, #333333));}.combobox-option.selected.svelte-178p70i {background:var(--combobox-option-selected-background, #e8f0fe);color:var(--combobox-option-selected-color, var(--combobox-option-color, #333333));font-weight:var(\n      --combobox-option-selected-font-weight,\n      var(--combobox-option-font-weight, inherit)\n    );}.combobox-option.selected.highlighted.svelte-178p70i {background:var(\n      --combobox-option-selected-hover-background,\n      var(--combobox-option-selected-background, #e8f0fe)\n    );}.combobox-option-disabled.svelte-178p70i {opacity:var(--combobox-option-disabled-opacity, 0.4);cursor:var(--combobox-option-disabled-cursor, not-allowed);pointer-events:none;}.combobox-create.svelte-178p70i {color:var(--combobox-create-color, #2563eb);}.combobox-action.svelte-178p70i {color:var(--combobox-action-color, #374151);}.combobox-option.with-divider.svelte-178p70i {border-top:var(--combobox-divider, 1px solid #e5e7eb);}.combobox-create-icon.svelte-178p70i,\n  .combobox-action-icon.svelte-178p70i {display:inline-flex;align-items:center;flex-shrink:0;}.combobox-action-icon.svelte-178p70i svg {width:14px;height:14px;}.combobox-limit.svelte-178p70i {display:flex;align-items:center;gap:6px;padding:var(--combobox-limit-padding, 8px 12px);font-size:var(--combobox-limit-font-size, 13px);font-weight:500;color:var(--combobox-limit-color, #b45309);background:var(--combobox-limit-background, #fffbeb);}.combobox-dropdown-header.svelte-178p70i {border-bottom:var(--combobox-dropdown-header-border, none);padding:var(--combobox-dropdown-header-padding, 0);}.combobox-dropdown-footer.svelte-178p70i {border-top:var(--combobox-dropdown-footer-border, none);padding:var(--combobox-dropdown-footer-padding, 0);}.combobox-empty.svelte-178p70i {padding:var(--combobox-empty-padding, 8px 12px);color:var(--combobox-empty-color, #999999);font-style:var(--combobox-empty-font-style, italic);}"
 };
 function Combobox(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$174);
+	push(t, !0), append_styles$1(e, $$css$175);
 	function i(e, t) {
 		return e.label.toLowerCase().includes(t.toLowerCase());
 	}
@@ -9490,7 +9490,7 @@ function Combobox(e, t) {
 	var Tn = child(Cn);
 	let En;
 	var Dn = child(Tn), On = (e) => {
-		var t = root$92();
+		var t = root$93();
 		snippet(child(t), be), reset(t), append(e, t);
 	};
 	if_block(Dn, (e) => {
@@ -9742,7 +9742,7 @@ delegate(["click"]), create_custom_element(Combobox, {
 }, [], ["getInputRef"], { mode: "open" });
 //#endregion
 //#region src/wc/components/Combobox.wc.svelte
-var rest_excludes$87 = new Set([
+var rest_excludes$88 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -9753,12 +9753,12 @@ var rest_excludes$87 = new Set([
 	"open",
 	"highlightedIndex",
 	"selected"
-]), root$91 = /* @__PURE__ */ from_html("<div> </div>"), $$css$173 = {
+]), root$92 = /* @__PURE__ */ from_html("<div> </div>"), $$css$174 = {
 	hash: "svelte-t9te14",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-combobox-display, block);}"
 };
 function Combobox_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$173);
+	push(t, !0), append_styles$1(e, $$css$174);
 	let n = (e) => {
 		var n = comment(), i = first_child(n), a = (e) => {
 			var n = comment();
@@ -9766,7 +9766,7 @@ function Combobox_wc(e, t) {
 		}, o = (e) => {
 			var n = comment();
 			slot(first_child(n), t, "empty-snippet", {}, (e) => {
-				var n = root$91();
+				var n = root$92();
 				set_style(n, "padding: var(--combobox-empty-padding, 8px 12px); color: var(--combobox-empty-color, #999999); font-style: var(--combobox-empty-font-style, italic);");
 				var i = child(n, !0);
 				reset(n), template_effect(() => set_text(i, t.noResultsText ?? "No results")), append(e, n);
@@ -9786,7 +9786,7 @@ function Combobox_wc(e, t) {
 		if_block(i, (e) => {
 			t.actionIcon ? e(a) : e(o, -1);
 		}), append(e, n);
-	}, a = prop(t, "comboboxAriaLabel", 7), o = prop(t, "value", 15, ""), s = prop(t, "inputValue", 15, ""), c = prop(t, "open", 15, !1), l = prop(t, "highlightedIndex", 31, () => -1), u = prop(t, "selected", 31, () => proxy([])), f = /* @__PURE__ */ rest_props(t, rest_excludes$87), p = t.$$host.querySelector("[slot=\"input-prefix\"]") !== null, h = t.$$host.querySelector("[slot=\"input-suffix\"]") !== null, S = t.$$host.querySelector("[slot=\"empty-snippet\"]") !== null, C = t.$$host.querySelector("[slot=\"action-icon\"]") !== null, k = t.$$host, R = /* @__PURE__ */ user_derived(() => dispatchEvents(k, f));
+	}, a = prop(t, "comboboxAriaLabel", 7), o = prop(t, "value", 15, ""), s = prop(t, "inputValue", 15, ""), c = prop(t, "open", 15, !1), l = prop(t, "highlightedIndex", 31, () => -1), u = prop(t, "selected", 31, () => proxy([])), f = /* @__PURE__ */ rest_props(t, rest_excludes$88), p = t.$$host.querySelector("[slot=\"input-prefix\"]") !== null, h = t.$$host.querySelector("[slot=\"input-suffix\"]") !== null, S = t.$$host.querySelector("[slot=\"empty-snippet\"]") !== null, C = t.$$host.querySelector("[slot=\"action-icon\"]") !== null, k = t.$$host, R = /* @__PURE__ */ user_derived(() => dispatchEvents(k, f));
 	var te = {
 		get comboboxAriaLabel() {
 			return a();
@@ -10359,13 +10359,13 @@ function tokenizedFly(e, t) {
 }
 //#endregion
 //#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 = {
+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$91 = /* @__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$173 = {
 	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);}\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();
-	push(t, !0), append_styles$1(e, $$css$172);
+	push(t, !0), append_styles$1(e, $$css$173);
 	let i = prop(t, "items", 7), a = prop(t, "open", 15, !1), o = prop(t, "placeholder", 7, "Search commands..."), s = prop(t, "emptyText", 7, "No results found."), c = prop(t, "testId", 7), l = prop(t, "itemIcon", 7), u = prop(t, "searchIcon", 7), f = prop(t, "onselect", 7), p = prop(t, "onclose", 7), h = prop(t, "classes", 7), S = `command-menu-listbox-${n}`, C = {
 		y: 30,
 		durationTokens: [
@@ -10550,7 +10550,7 @@ function CommandMenu(e, t) {
 			var t = comment();
 			snippet(first_child(t), u), append(e, t);
 		}, be = (e) => {
-			var t = root$90();
+			var t = root$91();
 			html(t, () => search_default, !0), reset(t), append(e, t);
 		};
 		if_block(p, (e) => {
@@ -10644,23 +10644,23 @@ delegate([
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/CommandMenu.wc.svelte
-var rest_excludes$86 = new Set([
+var rest_excludes$87 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), root$89 = /* @__PURE__ */ from_html("<span class=\"command-menu-search-icon\"></span>"), $$css$171 = {
+]), root$90 = /* @__PURE__ */ from_html("<span class=\"command-menu-search-icon\"></span>"), $$css$172 = {
 	hash: "svelte-1ai0l65",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-command-menu-display, block);}"
 };
 function CommandMenu_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$171);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$86), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$172);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$87), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	CommandMenu(e, spread_props(() => n, () => get(a), {
 		searchIcon: (e) => {
 			var n = comment();
 			slot(first_child(n), t, "search-icon", {}, (e) => {
-				var t = root$89();
+				var t = root$90();
 				html(t, () => search_default, !0), reset(t), append(e, t);
 			}), append(e, n);
 		},
@@ -10694,12 +10694,12 @@ 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$89 = /* @__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$171 = {
 	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, var(--motion-duration, 0.3s))\n      var(--gauge-transition-easing, var(--motion-easing, 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);
+	push(t, !0), append_styles$1(e, $$css$171);
 	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() {
@@ -10759,7 +10759,7 @@ function Gauge(e, t) {
 	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 = root$89(), n = child(t), i = (e) => {
 			var t = comment(), n = first_child(t), i = (e) => {
 				AnimatedNumber(e, { get value() {
 					return get(te);
@@ -10801,18 +10801,18 @@ create_custom_element(Gauge, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Gauge.wc.svelte
-var rest_excludes$85 = new Set([
+var rest_excludes$86 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$169 = {
+]), $$css$170 = {
 	hash: "svelte-l2lc76",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-gauge-display, block);}"
 };
 function Gauge_wc(e, t) {
-	append_styles$1(e, $$css$169);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$85);
+	append_styles$1(e, $$css$170);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$86);
 	Gauge(e, spread_props(() => n));
 }
 customElements.define("sui-gauge", create_custom_element(Gauge_wc, {
@@ -10843,12 +10843,12 @@ customElements.define("sui-gauge", create_custom_element(Gauge_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/GridItem/GridItem.svelte
-var root$87 = /* @__PURE__ */ from_html("<div role=\"button\" tabindex=\"0\"><div class=\"grid-header svelte-1h7hoii\"><img alt=\"\" class=\"grid-item-header-icon svelte-1h7hoii\"/></div> <div><div class=\"grid-item-body svelte-1h7hoii\"><img alt=\"\" class=\"grid-item-icon svelte-1h7hoii\"/></div></div> <div class=\"grid-item-footer svelte-1h7hoii\"> </div></div>"), $$css$168 = {
+var root$88 = /* @__PURE__ */ from_html("<div role=\"button\" tabindex=\"0\"><div class=\"grid-header svelte-1h7hoii\"><img alt=\"\" class=\"grid-item-header-icon svelte-1h7hoii\"/></div> <div><div class=\"grid-item-body svelte-1h7hoii\"><img alt=\"\" class=\"grid-item-icon svelte-1h7hoii\"/></div></div> <div class=\"grid-item-footer svelte-1h7hoii\"> </div></div>"), $$css$169 = {
 	hash: "svelte-1h7hoii",
 	code: ".container.svelte-1h7hoii {box-sizing:border-box;height:var(--grid-item-height, 98px);width:var(--grid-item-width, 66px);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;cursor:pointer;\n    /** Remove button tap effect */-webkit-tap-highlight-color:transparent;}.grid-header.svelte-1h7hoii {display:flex;width:var(--grid-header-width, 100%);justify-content:var(--grid-header-justify-content, end);position:var(--grid-header-position, absolute);top:var(--grid-header-top, 5px);z-index:var(--grid-header-z-index, 100);}.grid-item-header-icon.svelte-1h7hoii {height:var(--grid-item-header-icon-height, 16px);width:var(--grid-item-header-icon-width, fit-content);object-fit:var(--grid-item-header-icon-object-fit, contain);z-index:var(--grid-item-header-icon-z-index, 2);}.grid-item-body.svelte-1h7hoii {height:var(--grid-item-body-height, 64px);width:var(--grid-item-body-width, 64px);background-color:var(--grid-item-background-color, #faf9f9);border:var(--grid-item-border, 1px solid #eaeaea);border-radius:var(--grid-item-border-radius, var(--radius, 4px));margin:var(--grid-item-margin, 8px 0 0 0);display:flex;justify-content:center;align-items:center;}.grid-item-icon.svelte-1h7hoii {height:var(--grid-item-icon-height, 32px);width:var(--grid-item-icon-width, fit-content);object-fit:var(--grid-item-icon-object-fit, contain);z-index:var(--grid-item-icon-z-index, 100);}.grid-item-footer.svelte-1h7hoii {margin:var(--grid-item-footer-margin, 8px 0 0 0);font-size:var(--grid-item-font-size, 14px);color:var(--grid-item-color, #333);text-overflow:var(--grid-item-footer-text-overflow, ellipsis);white-space:var(--grid-item-footer-white-space, nowrap);overflow:var(--grid-item-footer-overflow, hidden);width:var(--grid-item-footer-width, 100%);text-align:var(--grid-item-footer-text-align, center);height:var(--grid-item-footer-height, fit-content);}.grid-body-loader.svelte-1h7hoii {position:relative;}.grid-body-loader.svelte-1h7hoii::before {content:'';box-sizing:border-box;position:absolute;inset:0px;margin:var(--grid-item-margin, 8px 0 0 0);border-radius:var(--grid-item-border-radius, var(--radius, 4px));border:var(--animation-version, 32px solid #cbcccf66);\n    animation: svelte-1h7hoii-clipperAnimation var(--loader-animation-duration, 3s) infinite linear;}\n\n  @keyframes svelte-1h7hoii-clipperAnimation {\n    0% {\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n    }\n    25% {\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n    }\n    50% {\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n    }\n    75% {\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n    }\n    100% {\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\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) {.grid-body-loader.svelte-1h7hoii::before {\n      /* clip-path is what the animation drives; clearing it reveals the whole\n         border ring, which is the frame the animation ends on anyway. */\n      animation: none;clip-path:none;}\n  }"
 };
 function GridItem(e, t) {
-	push(t, !0), append_styles$1(e, $$css$168);
+	push(t, !0), append_styles$1(e, $$css$169);
 	let n = prop(t, "icon", 7, ""), i = prop(t, "text", 7, ""), a = prop(t, "headerIcon", 7, ""), o = prop(t, "showLoader", 15, !1), s = prop(t, "onclick", 7), c = prop(t, "onkeydown", 7), l = prop(t, "classes", 7), u = prop(t, "testId", 7);
 	function f(e) {
 		o(!o()), s()?.(e);
@@ -10905,7 +10905,7 @@ function GridItem(e, t) {
 		set testId(e) {
 			u(e), flushSync();
 		}
-	}, S = root$87(), C = child(S), k = child(C);
+	}, S = root$88(), C = child(S), k = child(C);
 	reset(C);
 	var R = sibling(C, 2);
 	let te;
@@ -10928,18 +10928,18 @@ delegate(["click", "keydown"]), create_custom_element(GridItem, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/GridItem.wc.svelte
-var rest_excludes$84 = new Set([
+var rest_excludes$85 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$167 = {
+]), $$css$168 = {
 	hash: "svelte-skl48s",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-grid-item-display, block);}"
 };
 function GridItem_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$167);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$84), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$168);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$85), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	GridItem(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-grid-item", create_custom_element(GridItem_wc, {
@@ -10971,12 +10971,12 @@ customElements.define("sui-grid-item", create_custom_element(GridItem_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Icon/Icon.svelte
-var root$86 = /* @__PURE__ */ from_html("<span class=\"icon-svg svelte-15st86u\"></span>"), root_1$78 = /* @__PURE__ */ from_html("<div class=\"icon-text svelte-15st86u\"> </div>"), root_2$59 = /* @__PURE__ */ from_html("<div><!> <!></div>"), $$css$166 = {
+var root$87 = /* @__PURE__ */ from_html("<span class=\"icon-svg svelte-15st86u\"></span>"), root_1$78 = /* @__PURE__ */ from_html("<div class=\"icon-text svelte-15st86u\"> </div>"), root_2$59 = /* @__PURE__ */ from_html("<div><!> <!></div>"), $$css$167 = {
 	hash: "svelte-15st86u",
 	code: ".icon-container.svelte-15st86u {display:flex;padding:var(--icon-container-paddding, 4px);flex-direction:var(--icon-container-direction, column);align-items:center;cursor:pointer;}\n  /* Direct child only: the @html branch's svg lives inside .icon-svg and keeps\n     its own 100% sizing rule below. */.icon-container.svelte-15st86u > img,\n  .icon-container.svelte-15st86u > svg {height:var(--icon-height, 20px);width:var(--icon-width, 20px);padding:var(--icon-padding, 4px);}.icon-svg.svelte-15st86u {display:inline-flex;align-items:center;justify-content:center;width:var(--icon-width, 20px);height:var(--icon-height, 20px);padding:var(--icon-padding, 4px);color:var(--icon-svg-color, currentColor);}.icon-svg.svelte-15st86u svg {width:100%;height:100%;}.icon-text.svelte-15st86u {display:flex;padding:var(--icon-text-padding, 4px);flex-direction:var(--icon-text-direction, column);font-size:var(--icon-text-font-size, 12px);}"
 };
 function Icon(e, t) {
-	push(t, !0), append_styles$1(e, $$css$166);
+	push(t, !0), append_styles$1(e, $$css$167);
 	let n = prop(t, "icon", 7), i = prop(t, "svg", 7), a = prop(t, "text", 7), o = prop(t, "onclick", 7), s = prop(t, "onkeydown", 7), c = prop(t, "classes", 7), l = prop(t, "testId", 7), u = /* @__PURE__ */ user_derived(() => typeof o() == "function");
 	function f(e) {
 		s()?.(e), !(!get(u) || e.key !== "Enter" && e.key !== " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
@@ -11025,7 +11025,7 @@ function Icon(e, t) {
 			l(e), flushSync();
 		}
 	}, h = root_2$59(), S = child(h), C = (e) => {
-		var t = root$86();
+		var t = root$87();
 		html(t, i, !0), reset(t), append(e, t);
 	}, k = (e) => {
 		Img(e, {
@@ -11063,18 +11063,18 @@ delegate(["click", "keydown"]), create_custom_element(Icon, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Icon.wc.svelte
-var rest_excludes$83 = new Set([
+var rest_excludes$84 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$165 = {
+]), $$css$166 = {
 	hash: "svelte-1l2lk4u",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-icon-display, block);}"
 };
 function Icon_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$165);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$83), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$166);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$84), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Icon(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-icon", create_custom_element(Icon_wc, {
@@ -11100,12 +11100,12 @@ customElements.define("sui-icon", create_custom_element(Icon_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/IconStack/IconStack.svelte
-var root$85 = /* @__PURE__ */ from_html("<img alt=\"icon\" class=\"svelte-1upirm6\"/>"), root_1$77 = /* @__PURE__ */ from_html("<div class=\"text-container svelte-1upirm6\"><span class=\"svelte-1upirm6\"> </span></div>"), root_2$58 = /* @__PURE__ */ from_html("<div class=\"stack-icon svelte-1upirm6\"><!></div>"), root_3$51 = /* @__PURE__ */ from_html("<div></div>"), $$css$164 = {
+var root$86 = /* @__PURE__ */ from_html("<img alt=\"icon\" class=\"svelte-1upirm6\"/>"), root_1$77 = /* @__PURE__ */ from_html("<div class=\"text-container svelte-1upirm6\"><span class=\"svelte-1upirm6\"> </span></div>"), root_2$58 = /* @__PURE__ */ from_html("<div class=\"stack-icon svelte-1upirm6\"><!></div>"), root_3$51 = /* @__PURE__ */ from_html("<div></div>"), $$css$165 = {
 	hash: "svelte-1upirm6",
 	code: ".stack-container.svelte-1upirm6 {display:flex;margin:var(--stack-container-margin, 0px);}.stack-icon.svelte-1upirm6 {display:flex;width:var(--stack-icon-width, 36px);height:var(--stack-icon-height, 36px);background:var(--stack-icon-bg, white);border-radius:var(--stack-icon-radius, 50%);margin:var(--stack-icon-margin, 0px 0px 0px -14px);align-items:var(--stack-icon-align-items, center);border:var(--stack-icon-border, 1px solid #ffffff40);justify-content:var(--stack-icon-justify-content, center);box-shadow:var(--stack-icon-shadow, 0 2px 4px #00000026);}.stack-icon.svelte-1upirm6 img:where(.svelte-1upirm6) {width:var(--stack-img-width, 36px);height:var(--stack-img-height, 36px);}.text-container.svelte-1upirm6 {display:flex;width:var(--text-conatiner-width, 36px);height:var(--text-conatiner-height, 36px);align-items:var(--text-container-align-items, center);justify-content:var(--text-container-justify-content, center);}.text-container.svelte-1upirm6 span:where(.svelte-1upirm6) {color:var(--text-color, #666);font-size:var(--text-size, 13px);font-weight:var(--text-weight, 500);text-align:var(--text-align, center);}"
 };
 function IconStack(e, t) {
-	push(t, !0), append_styles$1(e, $$css$164);
+	push(t, !0), append_styles$1(e, $$css$165);
 	let n = prop(t, "icons", 7), i = prop(t, "classes", 7), a = prop(t, "testId", 7);
 	var o = {
 		get icons() {
@@ -11131,7 +11131,7 @@ function IconStack(e, t) {
 		var a = root_2$58();
 		let o;
 		var s = child(a), c = (e) => {
-			var n = root$85();
+			var n = root$86();
 			template_effect(() => set_attribute(n, "src", get(t).content)), append(e, n);
 		}, l = (e) => {
 			var n = root_1$77(), i = child(n), a = child(i, !0);
@@ -11151,18 +11151,18 @@ create_custom_element(IconStack, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/IconStack.wc.svelte
-var rest_excludes$82 = new Set([
+var rest_excludes$83 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$163 = {
+]), $$css$164 = {
 	hash: "svelte-onh6z6",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-icon-stack-display, block);}"
 };
 function IconStack_wc(e, t) {
-	append_styles$1(e, $$css$163);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$82);
+	append_styles$1(e, $$css$164);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$83);
 	IconStack(e, spread_props(() => n));
 }
 customElements.define("sui-icon-stack", create_custom_element(IconStack_wc, {
@@ -11175,12 +11175,12 @@ customElements.define("sui-icon-stack", create_custom_element(IconStack_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/IframeViewer/IframeViewer.svelte
-var root$84 = /* @__PURE__ */ from_html("<iframe></iframe>"), root_1$76 = /* @__PURE__ */ from_html("<div><!></div>"), $$css$162 = {
+var root$85 = /* @__PURE__ */ from_html("<iframe></iframe>"), root_1$76 = /* @__PURE__ */ from_html("<div><!></div>"), $$css$163 = {
 	hash: "svelte-18ttvcs",
 	code: ".iframe-viewer.svelte-18ttvcs {width:var(--iframe-viewer-width, 100%);height:var(--iframe-viewer-height, 100%);display:flex;}iframe.svelte-18ttvcs {width:100%;height:100%;border:var(--iframe-viewer-border, none);border-radius:var(--iframe-viewer-border-radius, 0);}"
 };
 function IframeViewer(e, t) {
-	push(t, !0), append_styles$1(e, $$css$162);
+	push(t, !0), append_styles$1(e, $$css$163);
 	let n = prop(t, "src", 7), i = prop(t, "title", 7, "Embedded Content"), a = prop(t, "allowedOrigins", 23, () => []), o = prop(t, "allow", 7, "fullscreen"), s = prop(t, "sandbox", 7), c = prop(t, "loading", 7), l = prop(t, "referrerpolicy", 7), u = prop(t, "credentialless", 7), f = prop(t, "testId", 7), p = prop(t, "classes", 7), h = prop(t, "onmessage", 7, () => {}), S = /* @__PURE__ */ state(null), C = (e, t) => {
 		get(S)?.contentWindow?.postMessage(e, t);
 	}, k = (e) => {
@@ -11260,7 +11260,7 @@ function IframeViewer(e, t) {
 			h(e), flushSync();
 		}
 	}, te = root_1$76(), ne = child(te), re = (e) => {
-		var t = root$84();
+		var t = root$85();
 		attribute_effect(t, () => ({
 			src: n(),
 			title: i(),
@@ -11292,19 +11292,19 @@ create_custom_element(IframeViewer, {
 }, [], ["postMessage"], { mode: "open" });
 //#endregion
 //#region src/wc/components/IframeViewer.wc.svelte
-var rest_excludes$81 = new Set([
+var rest_excludes$82 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"iframeViewerTitle"
-]), $$css$161 = {
+]), $$css$162 = {
 	hash: "svelte-1enlpal",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-iframe-viewer-display, block);}"
 };
 function IframeViewer_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$161);
-	let n = prop(t, "iframeViewerTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$81), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
+	push(t, !0), append_styles$1(e, $$css$162);
+	let n = prop(t, "iframeViewerTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$82), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
 	return IframeViewer(e, spread_props(() => i, () => get(o), { get title() {
 		return n();
 	} })), pop({
@@ -11360,18 +11360,18 @@ customElements.define("sui-iframe-viewer", create_custom_element(IframeViewer_wc
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/wc/components/Img.wc.svelte
-var rest_excludes$80 = new Set([
+var rest_excludes$81 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$160 = {
+]), $$css$161 = {
 	hash: "svelte-1e0l4pe",
 	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. The value\n     matches this component's own root element (inline-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-img-display, inline-block);}"
 };
 function Img_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$160);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$80), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$161);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$81), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Img(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-img", create_custom_element(Img_wc, {
@@ -11401,20 +11401,20 @@ customElements.define("sui-img", create_custom_element(Img_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/wc/components/Input.wc.svelte
-var rest_excludes$79 = new Set([
+var rest_excludes$80 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"inputAriaLabel",
 	"inputId"
-]), $$css$159 = {
+]), $$css$160 = {
 	hash: "svelte-org5s3",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-input-display, block);}"
 };
 function Input_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$159);
-	let n = prop(t, "inputAriaLabel", 7), i = prop(t, "inputId", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$79), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a)), c = (e) => {
+	push(t, !0), append_styles$1(e, $$css$160);
+	let n = prop(t, "inputAriaLabel", 7), i = prop(t, "inputId", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$80), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a)), c = (e) => {
 		if (e == null) return null;
 		if (typeof e == "boolean") return e;
 		let t = String(e).trim().toLowerCase();
@@ -11691,12 +11691,12 @@ customElements.define("sui-input", create_custom_element(Input_wc, {
 }, ["left-icon", "right-icon"], [], { mode: "open" }, formAssociated({ disabled: "disable" })));
 //#endregion
 //#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 = {
+var root$84 = /* @__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$159 = {
 	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, #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);
+	push(t, !0), append_styles$1(e, $$css$159);
 	let n = prop(t, "keys", 7), i = prop(t, "separator", 7, "+"), a = prop(t, "testId", 7), o = prop(t, "onclick", 7), s = prop(t, "classes", 7), c = prop(t, "literal", 7, !1), l = {
 		cmd: "⌘",
 		command: "⌘",
@@ -11763,7 +11763,7 @@ function KeyboardInput(e, t) {
 	}, C = root_2$57();
 	return each(C, 21, () => get(u), index, (e, t, n) => {
 		var a = root_1$75(), o = first_child(a), s = (e) => {
-			var t = root$83(), n = child(t, !0);
+			var t = root$84(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, i())), append(e, t);
 		};
 		if_block(o, (e) => {
@@ -11789,18 +11789,18 @@ delegate(["click", "keydown"]), create_custom_element(KeyboardInput, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/KeyboardInput.wc.svelte
-var rest_excludes$78 = new Set([
+var rest_excludes$79 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$157 = {
+]), $$css$158 = {
 	hash: "svelte-1xswlye",
 	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. The value\n     matches this component's own root element (inline-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-keyboard-input-display, inline-block);}"
 };
 function KeyboardInput_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$157);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$78), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$158);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$79), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	KeyboardInput(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-keyboard-input", create_custom_element(KeyboardInput_wc, {
@@ -11825,18 +11825,18 @@ customElements.define("sui-keyboard-input", create_custom_element(KeyboardInput_
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/wc/components/Loader.wc.svelte
-var rest_excludes$77 = new Set([
+var rest_excludes$78 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$156 = {
+]), $$css$157 = {
 	hash: "svelte-n2jjgs",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-loader-display, block);}"
 };
 function Loader_wc(e, t) {
-	append_styles$1(e, $$css$156);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$77);
+	append_styles$1(e, $$css$157);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$78);
 	Loader(e, spread_props(() => n));
 }
 customElements.define("sui-loader", create_custom_element(Loader_wc, {
@@ -11848,12 +11848,12 @@ customElements.define("sui-loader", create_custom_element(Loader_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/LoadingDots/LoadingDots.svelte
-var root$82 = /* @__PURE__ */ from_html("<span></span>"), root_1$74 = /* @__PURE__ */ from_html("<span role=\"status\" aria-label=\"Loading\"></span>"), $$css$155 = {
+var root$83 = /* @__PURE__ */ from_html("<span></span>"), root_1$74 = /* @__PURE__ */ from_html("<span role=\"status\" aria-label=\"Loading\"></span>"), $$css$156 = {
 	hash: "svelte-1lnsydm",
 	code: ".loading-dots.svelte-1lnsydm {display:inline-flex;align-items:center;gap:var(--loading-dots-gap, 3px);vertical-align:middle;line-height:1;}.dot.svelte-1lnsydm {display:block;width:var(--loading-dots-size, 6px);height:var(--loading-dots-size, 6px);border-radius:var(--loading-dots-border-radius, 50%);background-color:var(--loading-dots-color, currentColor);\n    animation: svelte-1lnsydm-loading-dots-bounce var(--loading-dots-duration, 1.4s) ease-in-out infinite;animation-delay:calc(var(--i) * var(--loading-dots-stagger, 0.16s));}.dot.pulse.svelte-1lnsydm {\n    animation-name: svelte-1lnsydm-loading-dots-pulse;}\n\n  @keyframes svelte-1lnsydm-loading-dots-bounce {\n    0%,\n    80%,\n    100% {\n      transform: translateY(0);\n    }\n    40% {\n      transform: translateY(var(--loading-dots-bounce-height, -6px));\n    }\n  }\n\n  @keyframes svelte-1lnsydm-loading-dots-pulse {\n    0%,\n    80%,\n    100% {\n      opacity: var(--loading-dots-pulse-min-opacity, 0.2);\n      transform: scale(var(--loading-dots-pulse-min-scale, 1));\n    }\n    40% {\n      opacity: 1;\n      transform: scale(1);\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) {\n    /* `.dot.pulse` further down sets `animation-name`, and it is both more\n       specific and later, so a lone `.dot` rule here loses to it and the pulse\n       variant keeps animating. Matching its specificity is what makes the guard\n       apply to both variants. */.dot.svelte-1lnsydm,\n    .dot.pulse.svelte-1lnsydm {\n      /* The rest frame of both keyframe sets is already the visible one --\n         translateY(0) at full opacity -- so stopping leaves the three dots\n         legible rather than collapsed or invisible. */\n      animation: none;transform:none;}\n  }"
 };
 function LoadingDots(e, t) {
-	push(t, !0), append_styles$1(e, $$css$155);
+	push(t, !0), append_styles$1(e, $$css$156);
 	let n = prop(t, "dots", 7, 3), i = prop(t, "animation", 7, "bounce"), a = prop(t, "testId", 7), o = prop(t, "classes", 7), s = /* @__PURE__ */ user_derived(() => Math.max(1, Math.round(n())));
 	var c = {
 		get dots() {
@@ -11882,7 +11882,7 @@ function LoadingDots(e, t) {
 		}
 	}, l = root_1$74();
 	return each(l, 21, () => ({ length: get(s) }), index, (e, t, n) => {
-		var o = root$82();
+		var o = root$83();
 		let s;
 		set_style(o, `--i: ${n}`), template_effect(() => {
 			s = set_class(o, 1, "dot svelte-1lnsydm", null, s, { pulse: i() === "pulse" }), set_attribute(o, "data-pw", typeof a() == "string" ? `${a()}-dot-${n}` : null), set_attribute(o, "testid", typeof a() == "string" ? `${a()}-dot-${n}` : null);
@@ -11899,18 +11899,18 @@ create_custom_element(LoadingDots, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/LoadingDots.wc.svelte
-var rest_excludes$76 = new Set([
+var rest_excludes$77 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$154 = {
+]), $$css$155 = {
 	hash: "svelte-19byewf",
 	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. The value\n     matches this component's own root element (inline-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-loading-dots-display, inline-block);}"
 };
 function LoadingDots_wc(e, t) {
-	append_styles$1(e, $$css$154);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$76);
+	append_styles$1(e, $$css$155);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$77);
 	LoadingDots(e, spread_props(() => n));
 }
 customElements.define("sui-loading-dots", create_custom_element(LoadingDots_wc, {
@@ -11930,12 +11930,12 @@ customElements.define("sui-loading-dots", create_custom_element(LoadingDots_wc,
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Pagination/Pagination.svelte
-var root$81 = /* @__PURE__ */ from_html("<span class=\"ellipsis svelte-1sajc2w\">&#8230;</span>"), root_1$73 = /* @__PURE__ */ from_html("<button> </button>"), root_2$56 = /* @__PURE__ */ from_html("<button class=\"page-button load-more-button svelte-1sajc2w\" aria-label=\"Load more\">&#8250;</button>"), root_3$50 = /* @__PURE__ */ from_html("<button class=\"page-button next-button svelte-1sajc2w\" aria-label=\"Next page\">&#8250;</button>"), root_4$42 = /* @__PURE__ */ from_html("<nav><button class=\"page-button prev-button svelte-1sajc2w\" aria-label=\"Previous page\">&#8249;</button> <!> <!></nav>"), $$css$153 = {
+var root$82 = /* @__PURE__ */ from_html("<span class=\"ellipsis svelte-1sajc2w\">&#8230;</span>"), root_1$73 = /* @__PURE__ */ from_html("<button> </button>"), root_2$56 = /* @__PURE__ */ from_html("<button class=\"page-button load-more-button svelte-1sajc2w\" aria-label=\"Load more\">&#8250;</button>"), root_3$50 = /* @__PURE__ */ from_html("<button class=\"page-button next-button svelte-1sajc2w\" aria-label=\"Next page\">&#8250;</button>"), root_4$42 = /* @__PURE__ */ from_html("<nav><button class=\"page-button prev-button svelte-1sajc2w\" aria-label=\"Previous page\">&#8249;</button> <!> <!></nav>"), $$css$154 = {
 	hash: "svelte-1sajc2w",
 	code: ".pagination.svelte-1sajc2w {display:var(--pagination-display, flex);gap:var(--pagination-gap, 4px);align-items:var(--pagination-align-items, center);}.pagination.disabled.svelte-1sajc2w {opacity:var(--pagination-disabled-opacity, 0.5);cursor:var(--pagination-disabled-cursor, not-allowed);}.page-button.svelte-1sajc2w {padding:var(--pagination-button-padding, 6px 10px);font-size:var(--pagination-button-font-size, 14px);font-weight:var(--pagination-button-font-weight, 400);font-family:var(--pagination-button-font-family, inherit);\n    /* Base state (and .load-more-button below) pairs its text with a\n       transparent background, not one of its own -- same shape as the table\n       title bug. A hardcoded literal here doesn't track a dark ambient\n       surface, so prev/next/page buttons went unreadable on a themed dark\n       page even though .active and :hover are safe (each pairs its colour\n       with its own opaque background). Inheriting keeps it tied to whatever\n       text colour the surrounding surface already resolved to. */color:var(--pagination-button-color, inherit);background:var(--pagination-button-background, transparent);border:var(--pagination-button-border, 1px solid #d1d5db);border-radius:var(--pagination-button-border-radius, var(--radius, 4px));cursor:var(--pagination-button-cursor, pointer);min-width:var(--pagination-button-min-width, 36px);height:var(--pagination-button-height, 36px);display:flex;align-items:center;justify-content:center;transition:var(\n      --pagination-transition,\n      background\n        var(--pagination-transition-duration, var(--duration-quick, var(--motion-duration, 0.15s)))\n        var(--pagination-transition-easing, var(--motion-easing, ease)),\n      color\n        var(--pagination-transition-duration, var(--duration-quick, var(--motion-duration, 0.15s)))\n        var(--pagination-transition-easing, var(--motion-easing, ease))\n    );}.page-button.svelte-1sajc2w:hover:not(:disabled):not(.active) {color:var(--pagination-button-hover-color, #111827);background:var(--pagination-button-hover-background, #f3f4f6);}.page-button.active.svelte-1sajc2w {color:var(--pagination-active-color, #ffffff);background:var(--pagination-active-background, #3a4550);border:var(--pagination-active-border, 1px solid #3a4550);font-weight:var(--pagination-active-font-weight, 600);}.load-more-button.svelte-1sajc2w {width:var(--pagination-load-more-width, auto);padding:var(--pagination-load-more-padding, 6px 14px);color:var(--pagination-load-more-color, inherit);background:var(--pagination-load-more-background, transparent);border-color:var(--pagination-load-more-border-color, #d1d5db);}.load-more-button.svelte-1sajc2w:hover:not(:disabled) {color:var(--pagination-load-more-hover-color, #111827);background:var(--pagination-load-more-hover-background, #f3f4f6);}.page-button.svelte-1sajc2w:disabled {opacity:var(--pagination-disabled-opacity, 0.5);cursor:var(--pagination-disabled-cursor, not-allowed);}.pagination.disabled.svelte-1sajc2w .page-button:where(.svelte-1sajc2w) {opacity:1;}.ellipsis.svelte-1sajc2w {color:var(--pagination-ellipsis-color, #6b7280);font-size:var(--pagination-ellipsis-font-size, 14px);min-width:var(--pagination-button-min-width, 36px);height:var(--pagination-button-height, 36px);display:flex;align-items:center;justify-content:center;}"
 };
 function Pagination(e, t) {
-	push(t, !0), append_styles$1(e, $$css$153);
+	push(t, !0), append_styles$1(e, $$css$154);
 	let n = prop(t, "totalPages", 7), i = prop(t, "currentPage", 15, 1), a = prop(t, "siblingCount", 7, 1), o = prop(t, "disabled", 7, !1), s = prop(t, "testId", 7), c = prop(t, "onchange", 7), l = prop(t, "classes", 7), u = prop(t, "hasMore", 7, !1), f = prop(t, "prevButtonTestId", 7), p = prop(t, "nextButtonTestId", 7), h = prop(t, "onloadmore", 7);
 	function S(e, t, n) {
 		let i = [];
@@ -12026,7 +12026,7 @@ function Pagination(e, t) {
 	var Me = child(G), Re = sibling(Me, 2);
 	each(Re, 17, () => get(C), index, (e, t) => {
 		var n = comment(), a = first_child(n), s = (e) => {
-			append(e, root$81());
+			append(e, root$82());
 		}, c = (e) => {
 			var n = root_1$73();
 			let a;
@@ -12071,18 +12071,18 @@ delegate(["click"]), create_custom_element(Pagination, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Pagination.wc.svelte
-var rest_excludes$75 = new Set([
+var rest_excludes$76 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$152 = {
+]), $$css$153 = {
 	hash: "svelte-1rkl1v",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-pagination-display, block);}"
 };
 function Pagination_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$152);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$75), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$153);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$76), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Pagination(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-pagination", create_custom_element(Pagination_wc, {
@@ -12128,7 +12128,7 @@ customElements.define("sui-pagination", create_custom_element(Pagination_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/wc/components/Pill.wc.svelte
-var rest_excludes$74 = new Set([
+var rest_excludes$75 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -12136,13 +12136,13 @@ var rest_excludes$74 = new Set([
 	"pillTitle",
 	"pillAriaExpanded",
 	"pillAriaPressed"
-]), $$css$151 = {
+]), $$css$152 = {
 	hash: "svelte-1i2upcc",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-pill-display, block);}"
 };
 function Pill_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$151);
-	let n = prop(t, "pillTitle", 7), i = prop(t, "pillAriaExpanded", 7), a = prop(t, "pillAriaPressed", 7), o = /* @__PURE__ */ rest_props(t, rest_excludes$74), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o));
+	push(t, !0), append_styles$1(e, $$css$152);
+	let n = prop(t, "pillTitle", 7), i = prop(t, "pillAriaExpanded", 7), a = prop(t, "pillAriaPressed", 7), o = /* @__PURE__ */ rest_props(t, rest_excludes$75), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o));
 	return Pill(e, spread_props(() => o, () => get(c), {
 		get title() {
 			return n();
@@ -12241,12 +12241,12 @@ 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$81 = /* @__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$151 = {
 	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);
+	push(t, !0), append_styles$1(e, $$css$151);
 	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() {
@@ -12297,7 +12297,7 @@ function Progress(e, t) {
 	let ne, re;
 	reset(R);
 	var G = sibling(R, 2), be = (e) => {
-		var t = root$80(), n = child(t), i = (e) => {
+		var t = root$81(), n = child(t), i = (e) => {
 			{
 				let t = /* @__PURE__ */ user_derived(() => `${Math.round(get(f))}%`);
 				AnimatedNumber(e, { get value() {
@@ -12329,18 +12329,18 @@ create_custom_element(Progress, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Progress.wc.svelte
-var rest_excludes$73 = new Set([
+var rest_excludes$74 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$149 = {
+]), $$css$150 = {
 	hash: "svelte-1fq6jug",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-progress-display, block);}"
 };
 function Progress_wc(e, t) {
-	append_styles$1(e, $$css$149);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$73);
+	append_styles$1(e, $$css$150);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$74);
 	Progress(e, spread_props(() => n));
 }
 customElements.define("sui-progress", create_custom_element(Progress_wc, {
@@ -12370,13 +12370,13 @@ customElements.define("sui-progress", create_custom_element(Progress_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Radio/Radio.svelte
-var root$79 = /* @__PURE__ */ from_html("<span> </span>"), root_1$71 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-14bh706\"> </div>"), root_2$55 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-14bh706\"> </div>"), root_3$49 = /* @__PURE__ */ from_html("<label><input type=\"radio\" class=\"radio-input svelte-14bh706\"/> <span><span></span></span> <!></label> <!> <!>", 1), $$css$148 = {
+var root$80 = /* @__PURE__ */ from_html("<span> </span>"), root_1$71 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-14bh706\"> </div>"), root_2$55 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-14bh706\"> </div>"), root_3$49 = /* @__PURE__ */ from_html("<label><input type=\"radio\" class=\"radio-input svelte-14bh706\"/> <span><span></span></span> <!></label> <!> <!>", 1), $$css$149 = {
 	hash: "svelte-14bh706",
 	code: ".radio-container.svelte-14bh706 {display:var(--radio-container-display, inline-flex);align-items:var(--radio-container-align-items, center);gap:var(--radio-container-gap, 8px);cursor:var(--radio-container-cursor, pointer);opacity:var(--radio-container-opacity, 1);}.radio-container.disabled.svelte-14bh706 {cursor:not-allowed;}.radio-input.svelte-14bh706 {position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;}.radio-indicator.svelte-14bh706 {display:inline-flex;align-items:center;justify-content:center;width:var(--radio-size, 20px);height:var(--radio-size, 20px);border:var(--radio-border, 2px solid #9e9e9e);border-radius:var(--radio-border-radius, 50%);background-color:var(--radio-background, #ffffff);\n    /* --radio-transition wraps the WHOLE value, not just the duration -- see the\n       matching comment on Checkbox's .box rule for why appending a separate\n       easing term after it (the prior shape here) breaks a consumer override\n       that already includes its own timing function. */transition:var(\n      --radio-transition,\n      var(--radio-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--radio-transition-easing, var(--motion-easing, ease))\n    );box-sizing:border-box;flex-shrink:0;}.radio-indicator.checked.svelte-14bh706 {border:var(--radio-selected-border, 2px solid #2196f3);background-color:var(--radio-selected-background, #ffffff);}.radio-indicator.disabled.svelte-14bh706 {border:var(--radio-disabled-border, 2px solid #cccccc);background-color:var(--radio-disabled-background, #f5f5f5);}.radio-container.svelte-14bh706:not(.disabled):hover .radio-indicator:where(.svelte-14bh706):not(.checked) {border:var(--radio-hover-border, 2px solid #2196f3);}.radio-input.svelte-14bh706:focus-visible + .radio-indicator:where(.svelte-14bh706) {box-shadow:var(--radio-focus-shadow, 0 0 0 3px rgba(33, 150, 243, 0.3));}.radio-dot.svelte-14bh706 {width:0;height:0;border-radius:var(--radio-dot-border-radius, 50%);background-color:var(--radio-dot-color, #2196f3);transition:var(\n      --radio-transition,\n      var(--radio-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--radio-transition-easing, var(--motion-easing, ease))\n    );}.radio-dot.checked.svelte-14bh706 {width:var(--radio-dot-size, 10px);height:var(--radio-dot-size, 10px);}.radio-dot.checked.disabled.svelte-14bh706 {background-color:var(--radio-disabled-dot-color, #cccccc);}.radio-text.svelte-14bh706 {font-size:var(--radio-text-font-size, 14px);font-weight:var(--radio-text-font-weight, 400);color:var(--radio-text-color, #333333);}.radio-text.disabled.svelte-14bh706 {color:var(--radio-disabled-text-color, #999999);}.field-error.svelte-14bh706 {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-14bh706 {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}"
 };
 function Radio(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$148);
+	push(t, !0), append_styles$1(e, $$css$149);
 	let i = prop(t, "name", 7), a = prop(t, "value", 7), o = prop(t, "selectedValue", 15, ""), s = prop(t, "text", 7, ""), c = prop(t, "disabled", 7, !1), l = prop(t, "testId", 7), u = prop(t, "onchange", 7), f = prop(t, "classes", 7), p = prop(t, "required", 7, !1), h = prop(t, "form", 7), S = prop(t, "errorMessage", 7), C = prop(t, "infoMessage", 7), k = prop(t, "invalid", 7, !1), R = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: S(),
 		info: C(),
@@ -12474,7 +12474,7 @@ function Radio(e, t) {
 	let ot;
 	reset(Ue);
 	var ct = sibling(Ue, 2), lt = (e) => {
-		var t = root$79();
+		var t = root$80();
 		let n;
 		var i = child(t, !0);
 		reset(t), template_effect(() => {
@@ -12588,18 +12588,18 @@ function radioGrouping(e) {
 function extendRadio(e) {
 	return radioGrouping(formAssociated({ selected: "selectedValue" })(e));
 }
-var rest_excludes$72 = new Set([
+var rest_excludes$73 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$147 = {
+]), $$css$148 = {
 	hash: "svelte-gk6e66",
 	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. The value\n     matches this component's own root element (inline-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-radio-display, inline-block);}"
 };
 function Radio_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$147);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$72), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$148);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$73), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Radio(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-radio", create_custom_element(Radio_wc, {
@@ -12669,12 +12669,12 @@ function PortalContentRenderer(e, t) {
 create_custom_element(PortalContentRenderer, { snippet: {} }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/Tooltip/Tooltip.svelte
-var root_1$70 = /* @__PURE__ */ from_html("<span class=\"tooltip-icon svelte-1xxu8em\" aria-hidden=\"true\"><!></span>"), root_2$54 = /* @__PURE__ */ from_html("<span class=\"tooltip-text svelte-1xxu8em\"> </span>"), root_3$48 = /* @__PURE__ */ from_html("<div role=\"tooltip\"><div class=\"tooltip-arrow svelte-1xxu8em\"></div> <!></div>"), root_4$41 = /* @__PURE__ */ from_html("<div role=\"none\"><!> <!> <!> <!></div>"), $$css$146 = {
+var root_1$70 = /* @__PURE__ */ from_html("<span class=\"tooltip-icon svelte-1xxu8em\" aria-hidden=\"true\"><!></span>"), root_2$54 = /* @__PURE__ */ from_html("<span class=\"tooltip-text svelte-1xxu8em\"> </span>"), root_3$48 = /* @__PURE__ */ from_html("<div role=\"tooltip\"><div class=\"tooltip-arrow svelte-1xxu8em\"></div> <!></div>"), root_4$41 = /* @__PURE__ */ from_html("<div role=\"none\"><!> <!> <!> <!></div>"), $$css$147 = {
 	hash: "svelte-1xxu8em",
 	code: ".tooltip-container.svelte-1xxu8em {position:relative;display:var(--tooltip-container-display, inline-flex);}.tooltip-icon.svelte-1xxu8em {display:contents;color:var(--tooltip-icon-color, currentColor);}.tooltip-bubble.svelte-1xxu8em {position:absolute;z-index:var(--tooltip-z-index, 1000);max-width:var(--tooltip-max-width, 200px);background:var(--tooltip-background, #333333);color:var(--tooltip-color, #ffffff);font-size:var(--tooltip-font-size, 12px);font-weight:var(--tooltip-font-weight, 400);font-family:var(--tooltip-font-family, inherit);padding:var(--tooltip-padding, 6px 10px);border-radius:var(--tooltip-border-radius, var(--radius, 4px));border:var(--tooltip-border, none);box-shadow:var(--tooltip-box-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));white-space:normal;word-wrap:break-word;pointer-events:none;opacity:1;transition:opacity\n      var(--tooltip-opacity-duration, var(--duration-quick, var(--motion-duration, 0.15s)))\n      var(--tooltip-opacity-easing, var(--ease-in-out, var(--motion-easing, ease-in-out)));}.tooltip-arrow.svelte-1xxu8em {position:absolute;width:0;height:0;border-style:solid;}\n\n  /* Top position. --tooltip-shift is the viewport-edge clamp: the bubble slides\n     along its cross axis to stay on screen while the arrow compensates the other\n     way so it keeps pointing at the trigger. */.top.svelte-1xxu8em {bottom:calc(100% + var(--tooltip-offset, 8px));left:50%;transform:translateX(calc(-50% + var(--tooltip-shift, 0px)));}.top.svelte-1xxu8em .tooltip-arrow:where(.svelte-1xxu8em) {top:100%;left:calc(50% - var(--tooltip-shift, 0px));transform:translateX(-50%);border-width:var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px) 0\n      var(--tooltip-arrow-size, 5px);border-color:var(--tooltip-arrow-color, var(--tooltip-background, #333333)) transparent\n      transparent transparent;}\n\n  /* Bottom position */.bottom.svelte-1xxu8em {top:calc(100% + var(--tooltip-offset, 8px));left:50%;transform:translateX(calc(-50% + var(--tooltip-shift, 0px)));}.bottom.svelte-1xxu8em .tooltip-arrow:where(.svelte-1xxu8em) {bottom:100%;left:calc(50% - var(--tooltip-shift, 0px));transform:translateX(-50%);border-width:0 var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px)\n      var(--tooltip-arrow-size, 5px);border-color:transparent transparent\n      var(--tooltip-arrow-color, var(--tooltip-background, #333333)) transparent;}\n\n  /* Left position */.left.svelte-1xxu8em {right:calc(100% + var(--tooltip-offset, 8px));top:50%;transform:translateY(calc(-50% + var(--tooltip-shift, 0px)));}.left.svelte-1xxu8em .tooltip-arrow:where(.svelte-1xxu8em) {left:100%;top:calc(50% - var(--tooltip-shift, 0px));transform:translateY(-50%);border-width:var(--tooltip-arrow-size, 5px) 0 var(--tooltip-arrow-size, 5px)\n      var(--tooltip-arrow-size, 5px);border-color:transparent transparent transparent\n      var(--tooltip-arrow-color, var(--tooltip-background, #333333));}\n\n  /* Right position */.right.svelte-1xxu8em {left:calc(100% + var(--tooltip-offset, 8px));top:50%;transform:translateY(calc(-50% + var(--tooltip-shift, 0px)));}.right.svelte-1xxu8em .tooltip-arrow:where(.svelte-1xxu8em) {right:100%;top:calc(50% - var(--tooltip-shift, 0px));transform:translateY(-50%);border-width:var(--tooltip-arrow-size, 5px) var(--tooltip-arrow-size, 5px)\n      var(--tooltip-arrow-size, 5px) 0;border-color:transparent var(--tooltip-arrow-color, var(--tooltip-background, #333333))\n      transparent transparent;}.tooltip-text.svelte-1xxu8em {color:var(--tooltip-color, #ffffff);}"
 };
 function Tooltip(e, t) {
-	push(t, !0), append_styles$1(e, $$css$146);
+	push(t, !0), append_styles$1(e, $$css$147);
 	let n = prop(t, "text", 7), i = prop(t, "position", 7, "top"), a = prop(t, "delay", 7, 0), o = prop(t, "testId", 7), s = prop(t, "classes", 7), c = prop(t, "children", 7), l = prop(t, "icon", 7), u = prop(t, "iconPosition", 7, "leading"), f = prop(t, "content", 7), p = prop(t, "usePortal", 7, !1), h = /* @__PURE__ */ state(!1), S = /* @__PURE__ */ state(null), C = /* @__PURE__ */ state(0), k = 8, R = {
 		top: "bottom",
 		bottom: "top",
@@ -12905,12 +12905,12 @@ delegate(["focusin", "focusout"]), create_custom_element(Tooltip, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/RelativeTime/RelativeTime.svelte
-var root$78 = /* @__PURE__ */ from_html("<time> </time>"), $$css$145 = {
+var root$79 = /* @__PURE__ */ from_html("<time> </time>"), $$css$146 = {
 	hash: "svelte-jx3csm",
 	code: ".relative-time.svelte-jx3csm {font-size:var(--relative-time-font-size, 14px);font-weight:var(--relative-time-font-weight, 400);font-family:var(--relative-time-font-family, inherit);color:var(--relative-time-color, inherit);cursor:var(--relative-time-cursor, default);}"
 };
 function RelativeTime(e, t) {
-	push(t, !0), append_styles$1(e, $$css$145);
+	push(t, !0), append_styles$1(e, $$css$146);
 	let n = prop(t, "date", 7), i = prop(t, "locale", 7), a = prop(t, "format", 7, "long"), o = prop(t, "updateInterval", 7, 6e4), s = prop(t, "tooltip", 7, !1), c = prop(t, "testId", 7), l = prop(t, "classes", 7), u = /* @__PURE__ */ user_derived(() => n() instanceof Date ? n() : new Date(n())), f = /* @__PURE__ */ user_derived(() => get(u).toISOString()), p = /* @__PURE__ */ user_derived(() => get(u).toLocaleString(i(), {
 		dateStyle: "full",
 		timeStyle: "short"
@@ -12979,7 +12979,7 @@ function RelativeTime(e, t) {
 				return get(p);
 			},
 			children: (e, t) => {
-				var n = root$78(), i = child(n, !0);
+				var n = root$79(), i = child(n, !0);
 				reset(n), template_effect(() => {
 					set_class(n, 1, `relative-time ${l() ?? "" ?? ""}`, "svelte-jx3csm"), set_attribute(n, "datetime", get(f)), set_attribute(n, "data-pw", typeof c() == "string" ? c() : null), set_attribute(n, "testid", typeof c() == "string" ? c() : null), set_text(i, get(h));
 				}), append(e, n);
@@ -12987,7 +12987,7 @@ function RelativeTime(e, t) {
 			$$slots: { default: !0 }
 		});
 	}, re = (e) => {
-		var t = root$78(), n = child(t, !0);
+		var t = root$79(), n = child(t, !0);
 		reset(t), template_effect(() => {
 			set_class(t, 1, `relative-time ${l() ?? "" ?? ""}`, "svelte-jx3csm"), set_attribute(t, "datetime", get(f)), set_attribute(t, "data-pw", typeof c() == "string" ? c() : null), set_attribute(t, "testid", typeof c() == "string" ? c() : null), set_text(n, get(h));
 		}), append(e, t);
@@ -13007,18 +13007,18 @@ create_custom_element(RelativeTime, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/RelativeTime.wc.svelte
-var rest_excludes$71 = new Set([
+var rest_excludes$72 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$144 = {
+]), $$css$145 = {
 	hash: "svelte-1xmghim",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-relative-time-display, block);}"
 };
 function RelativeTime_wc(e, t) {
-	append_styles$1(e, $$css$144);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$71);
+	append_styles$1(e, $$css$145);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$72);
 	RelativeTime(e, spread_props(() => n));
 }
 customElements.define("sui-relative-time", create_custom_element(RelativeTime_wc, {
@@ -13048,12 +13048,12 @@ customElements.define("sui-relative-time", create_custom_element(RelativeTime_wc
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Shimmer/Shimmer.svelte
-var root$77 = /* @__PURE__ */ from_html("<div></div>"), $$css$143 = {
+var root$78 = /* @__PURE__ */ from_html("<div></div>"), $$css$144 = {
 	hash: "svelte-ab0pau",
 	code: ".shimmer.svelte-ab0pau {width:var(--shimmer-width, 100%);height:var(--shimmer-height, 16px);border-radius:var(--shimmer-border-radius, var(--radius, 4px));background-color:var(--shimmer-background, #e0e0e0);opacity:var(--shimmer-opacity, 1);overflow:hidden;position:relative;}.shimmer.svelte-ab0pau::after {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(\n      90deg,\n      transparent,\n      var(--shimmer-highlight, rgba(255, 255, 255, 0.4)),\n      transparent\n    );\n    animation: svelte-ab0pau-shimmer var(--shimmer-duration, 1.5s) infinite;}\n\n  @keyframes svelte-ab0pau-shimmer {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\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) {.shimmer.svelte-ab0pau::after {\n      /* The sweep is the only animated part; the base block underneath is the\n         skeleton. Removing the sweep leaves exactly that -- a flat placeholder\n         -- rather than a highlight band frozen somewhere across it. */display:none;}\n  }"
 };
 function Shimmer(e, t) {
-	push(t, !0), append_styles$1(e, $$css$143);
+	push(t, !0), append_styles$1(e, $$css$144);
 	let n = prop(t, "testId", 7), i = prop(t, "classes", 7);
 	var a = {
 		get testId() {
@@ -13068,7 +13068,7 @@ function Shimmer(e, t) {
 		set classes(e) {
 			i(e), flushSync();
 		}
-	}, o = root$77();
+	}, o = root$78();
 	return template_effect(() => {
 		set_class(o, 1, `shimmer ${i() ?? "" ?? ""}`, "svelte-ab0pau"), set_attribute(o, "data-pw", typeof n() == "string" ? n() : null), set_attribute(o, "testid", typeof n() == "string" ? n() : null);
 	}), append(e, o), pop(a);
@@ -13079,18 +13079,18 @@ create_custom_element(Shimmer, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Shimmer.wc.svelte
-var rest_excludes$70 = new Set([
+var rest_excludes$71 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$142 = {
+]), $$css$143 = {
 	hash: "svelte-1csal4e",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-shimmer-display, block);}"
 };
 function Shimmer_wc(e, t) {
-	append_styles$1(e, $$css$142);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$70);
+	append_styles$1(e, $$css$143);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$71);
 	Shimmer(e, spread_props(() => n));
 }
 customElements.define("sui-shimmer", create_custom_element(Shimmer_wc, {
@@ -13193,12 +13193,12 @@ var SIZE_RANDOMNESS = .95, BASE_PARTICLE_SIZE = 1.6, LISTENING_CYCLE_MS = 3e3, L
 	if (!Number.isFinite(o) || o <= 0) return t;
 	let s = 1 - Math.exp(-n / o);
 	return e + (t - e) * s;
-}, clampLevel = (e) => Number.isFinite(e) ? Math.max(0, Math.min(1, e)) : 0, audioScale = (e) => AUDIO_SCALE_RANGE.min + clampLevel(e) * (AUDIO_SCALE_RANGE.max - AUDIO_SCALE_RANGE.min), audioSpeed = (e, t) => (Number.isFinite(t) ? t : 1) * (AUDIO_SPEED_RANGE.min + clampLevel(e) * (AUDIO_SPEED_RANGE.max - AUDIO_SPEED_RANGE.min)), resolveMotionSpeed = (e, t, n, i, a) => i === null ? a ? 0 : t === "listening" ? listeningSpeed(n, e) : Number.isFinite(e) ? e : 1 : audioSpeed(i, e), resolveMotionScale = (e, t, n, i) => n === null ? i || e !== "listening" ? 1 : listeningScale(t) : audioScale(n), root$76 = /* @__PURE__ */ from_html("<div class=\"voice-orb-status svelte-112josi\" aria-live=\"polite\" aria-atomic=\"true\"> </div>"), root_1$69 = /* @__PURE__ */ from_html("<div><canvas class=\"voice-orb-canvas svelte-112josi\" aria-hidden=\"true\"></canvas> <!></div>"), $$css$141 = {
+}, clampLevel = (e) => Number.isFinite(e) ? Math.max(0, Math.min(1, e)) : 0, audioScale = (e) => AUDIO_SCALE_RANGE.min + clampLevel(e) * (AUDIO_SCALE_RANGE.max - AUDIO_SCALE_RANGE.min), audioSpeed = (e, t) => (Number.isFinite(t) ? t : 1) * (AUDIO_SPEED_RANGE.min + clampLevel(e) * (AUDIO_SPEED_RANGE.max - AUDIO_SPEED_RANGE.min)), resolveMotionSpeed = (e, t, n, i, a) => i === null ? a ? 0 : t === "listening" ? listeningSpeed(n, e) : Number.isFinite(e) ? e : 1 : audioSpeed(i, e), resolveMotionScale = (e, t, n, i) => n === null ? i || e !== "listening" ? 1 : listeningScale(t) : audioScale(n), root$77 = /* @__PURE__ */ from_html("<div class=\"voice-orb-status svelte-112josi\" aria-live=\"polite\" aria-atomic=\"true\"> </div>"), root_1$69 = /* @__PURE__ */ from_html("<div><canvas class=\"voice-orb-canvas svelte-112josi\" aria-hidden=\"true\"></canvas> <!></div>"), $$css$142 = {
 	hash: "svelte-112josi",
 	code: ".voice-orb.svelte-112josi {width:100%;overflow:visible;}.voice-orb-canvas.svelte-112josi {width:100%;display:block;\n    /* Pointer repulsion needs the move events a default touch gesture would eat. */touch-action:none;}\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. */.voice-orb-status.svelte-112josi {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 VoiceOrb(e, t) {
-	push(t, !0), append_styles$1(e, $$css$141);
+	push(t, !0), append_styles$1(e, $$css$142);
 	let n = prop(t, "variant", 7, "idle"), i = prop(t, "speedMultiplier", 7, 1), a = prop(t, "seed", 7), o = prop(t, "height", 7, 400), s = prop(t, "particleCount", 7, 1e3), c = prop(t, "radius", 7, 140), l = prop(t, "interactive", 7, !0), u = prop(t, "repelRadius", 7, 200), f = prop(t, "analyser", 7), p = prop(t, "sensitivity", 7, 1), h = prop(t, "persistKey", 7), S = prop(t, "classes", 7), C = prop(t, "testId", 7), k = prop(t, "statusLabels", 7), R = prop(t, "onfirstframe", 7), te = prop(t, "onlevel", 7), ne = /* @__PURE__ */ user_derived(() => k()?.[n()] ?? ""), re = 600, G = .0021, be = .0014, Me = {
 		r: 128,
 		g: 128,
@@ -13400,7 +13400,7 @@ function VoiceOrb(e, t) {
 	let Mt;
 	bind_this(jt, (e) => set(Re, e), () => get(Re));
 	var Nt = sibling(jt, 2), Pt = (e) => {
-		var t = root$76(), n = child(t, !0);
+		var t = root$77(), n = child(t, !0);
 		reset(t), template_effect(() => set_text(n, get(ne))), append(e, t);
 	};
 	return if_block(Nt, (e) => {
@@ -13429,18 +13429,18 @@ delegate(["pointermove"]), create_custom_element(VoiceOrb, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/VoiceOrb.wc.svelte
-var rest_excludes$69 = new Set([
+var rest_excludes$70 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$140 = {
+]), $$css$141 = {
 	hash: "svelte-1febmww",
 	code: "\n  /* A custom element defaults to `display: inline`, which has no definite width\n     for a percentage to resolve against -- and VoiceOrb's own root sizes itself\n     with `width: 100%`, so without this the canvas resolved against the wrong\n     ancestor and its size depended on the consumer's surrounding markup. The\n     value matches that root (block-level), and is a token so a consumer can\n     change it without reaching inside the shadow root, which a stylesheet\n     cannot do. Same shape as every other wrapper -- this element was the one\n     that arrived from release without it. */:host {display:var(--sui-voice-orb-display, block);}"
 };
 function VoiceOrb_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$140);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$69), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$141);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$70), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	VoiceOrb(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-voice-orb", create_custom_element(VoiceOrb_wc, {
@@ -13481,7 +13481,7 @@ customElements.define("sui-voice-orb", create_custom_element(VoiceOrb_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/wc/components/Slider.wc.svelte
-var rest_excludes$68 = new Set([
+var rest_excludes$69 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -13489,13 +13489,13 @@ var rest_excludes$68 = new Set([
 	"sliderAriaLabel",
 	"sliderAriaLabelledby",
 	"sliderAriaValueText"
-]), $$css$139 = {
+]), $$css$140 = {
 	hash: "svelte-1ud8gzi",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-slider-display, block);}"
 };
 function Slider_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$139);
-	let n = prop(t, "sliderAriaLabel", 7), i = prop(t, "sliderAriaLabelledby", 7), a = prop(t, "sliderAriaValueText", 7), o = /* @__PURE__ */ rest_props(t, rest_excludes$68), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o));
+	push(t, !0), append_styles$1(e, $$css$140);
+	let n = prop(t, "sliderAriaLabel", 7), i = prop(t, "sliderAriaLabelledby", 7), a = prop(t, "sliderAriaValueText", 7), o = /* @__PURE__ */ rest_props(t, rest_excludes$69), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o));
 	function l(e) {
 		if (typeof e != "string" || e.trim() === "") return;
 		let t = s.getRootNode();
@@ -13612,20 +13612,20 @@ customElements.define("sui-slider", create_custom_element(Slider_wc, {
 }, [], [], { mode: "open" }, formAssociated({})));
 //#endregion
 //#region src/wc/components/SplitInput.wc.svelte
-var rest_excludes$67 = new Set([
+var rest_excludes$68 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"values",
 	"splitInputAriaLabel"
-]), $$css$138 = {
+]), $$css$139 = {
 	hash: "svelte-9bff7z",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-split-input-display, block);}"
 };
 function SplitInput_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$138);
-	let n = prop(t, "values", 31, () => proxy([])), i = prop(t, "splitInputAriaLabel", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$67), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
+	push(t, !0), append_styles$1(e, $$css$139);
+	let n = prop(t, "values", 31, () => proxy([])), i = prop(t, "splitInputAriaLabel", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$68), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
 	return SplitInput(e, spread_props(() => a, () => get(s), {
 		get ariaLabel() {
 			return i();
@@ -13698,12 +13698,12 @@ customElements.define("sui-split-input", create_custom_element(SplitInput_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Status/Status.svelte
-var root$75 = /* @__PURE__ */ from_html("<div><div class=\"order-status svelte-19qpx1s\"><div class=\"status-image svelte-19qpx1s\"><!></div> <!> <div class=\"status-description svelte-19qpx1s\"><!></div> <!> <!></div></div>"), $$css$137 = {
+var root$76 = /* @__PURE__ */ from_html("<div><div class=\"order-status svelte-19qpx1s\"><div class=\"status-image svelte-19qpx1s\"><!></div> <!> <div class=\"status-description svelte-19qpx1s\"><!></div> <!> <!></div></div>"), $$css$138 = {
 	hash: "svelte-19qpx1s",
 	code: ".status-text.svelte-19qpx1s {margin-bottom:8px;}\n\n  /* The weight and colour defaults belong to the plain div only. When a consumer asks for a\n     heading tag (statusTextTag h1-h6) the whole point is that the application's own heading\n     typography applies, so those two declarations must not sit on the element and win. */.status-text-default.svelte-19qpx1s {font-weight:var(--status-font-weight, 600);color:var(--status-description-font-color, light-dark(#3d5a76, #9ab4cc));}.status-description.svelte-19qpx1s {font-weight:var(--status-font-weight, 400);color:var(--status-description-font-color, light-dark(#3d5a76, #9ab4cc));padding:0px 42px;margin-bottom:25px;}.status-image.svelte-19qpx1s {color:var(--status-icon-color, inherit);display:flex;margin-bottom:25px;}.background.svelte-19qpx1s {min-height:var(--status-min-height, 100vh);display:flex;justify-content:center;align-items:center;}.order-status.svelte-19qpx1s {flex-direction:column;display:flex;font-family:var(--order-font, inherit);font-size:var(--order-font-size, 14px);text-align:center;}\n  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {.order-status.svelte-19qpx1s {background-color:var(--status-panel-background, rgba(255, 255, 255, 0.6));-webkit-backdrop-filter:var(--status-panel-backdrop-filter, blur(60px));backdrop-filter:var(--status-panel-backdrop-filter, blur(60px));}\n  }"
 };
 function Status(e, t) {
-	push(t, !0), append_styles$1(e, $$css$137);
+	push(t, !0), append_styles$1(e, $$css$138);
 	let n = "icons/order-success-icon.svg", i = "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'22'%20fill%3D'%23e6f6ec'%20stroke%3D'%232e994c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M15%2024.5l6.5%206.5L33%2019.5'%20fill%3D'none'%20stroke%3D'%232e994c'%20stroke-width%3D'3.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E", a = prop(t, "statusIcon", 7, n), o = prop(t, "statusIconAlt", 7, "status"), s = prop(t, "statusText", 7, ""), c = prop(t, "statusTextTag", 7, "div"), l = prop(t, "statusDescription", 7, ""), u = prop(t, "buttonProperties", 7), f = prop(t, "classes", 7), p = prop(t, "onbuttonclick", 7), h = prop(t, "icon", 7), S = prop(t, "descriptionSnippet", 7), C = prop(t, "children", 7), k = prop(t, "testId", 7), R = /* @__PURE__ */ user_derived(() => a() === n ? "data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'22'%20fill%3D'%23e6f6ec'%20stroke%3D'%232e994c'%20stroke-width%3D'2'%2F%3E%3Cpath%20d%3D'M15%2024.5l6.5%206.5L33%2019.5'%20fill%3D'none'%20stroke%3D'%232e994c'%20stroke-width%3D'3.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E" : null);
 	var te = {
 		get statusIcon() {
@@ -13778,7 +13778,7 @@ function Status(e, t) {
 		set testId(e) {
 			k(e), flushSync();
 		}
-	}, ne = root$75(), re = child(ne), G = child(re), be = child(G), Me = (e) => {
+	}, ne = root$76(), re = child(ne), G = child(re), be = child(G), Me = (e) => {
 		var t = comment();
 		snippet(first_child(t), h), append(e, t);
 	}, Re = (e) => {
@@ -13849,17 +13849,17 @@ create_custom_element(Status, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Status.wc.svelte
-var rest_excludes$66 = new Set([
+var rest_excludes$67 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$136 = {
+]), $$css$137 = {
 	hash: "svelte-117ygut",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-status-display, block);}"
 };
 function Status_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$136);
+	push(t, !0), append_styles$1(e, $$css$137);
 	let n = (e) => {
 		var n = comment(), i = first_child(n), a = (e) => {
 			var n = comment();
@@ -13885,7 +13885,7 @@ function Status_wc(e, t) {
 		if_block(i, (e) => {
 			t.descriptionSnippet ? e(a) : e(o, -1);
 		}), append(e, n);
-	}, a = /* @__PURE__ */ rest_props(t, rest_excludes$66), o = t.$$host, s = t.$$host.querySelector("[slot=\"icon\"]") !== null, c = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
+	}, a = /* @__PURE__ */ rest_props(t, rest_excludes$67), o = t.$$host, s = t.$$host.querySelector("[slot=\"icon\"]") !== null, c = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
 	{
 		let o = (e) => {
 			var n = comment();
@@ -13946,13 +13946,13 @@ customElements.define("sui-status", create_custom_element(Status_wc, {
 ], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Stepper/Step.svelte
-var root$74 = /* @__PURE__ */ from_html("<div class=\"step-icon-container svelte-z5hug7\"><img class=\"step-icon svelte-z5hug7\" alt=\"\"/></div>"), root_1$68 = /* @__PURE__ */ from_html("<div class=\"step-index-container svelte-z5hug7\"><svg class=\"step-spinner svelte-z5hug7\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-opacity=\"0.25\" stroke-width=\"3\"></circle><path d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"></path></svg></div>"), root_2$53 = /* @__PURE__ */ from_html("<div class=\"step-index-container svelte-z5hug7\"><div class=\"step-index-text svelte-z5hug7\"> </div></div>"), root_3$47 = /* @__PURE__ */ from_html("<div class=\"step-badge svelte-z5hug7\"><!></div>"), root_4$40 = /* @__PURE__ */ from_html("<div><!> <div class=\"step-text svelte-z5hug7\"> </div> <!> <div class=\"separator svelte-z5hug7\"></div></div>"), $$css$135 = {
+var root$75 = /* @__PURE__ */ from_html("<div class=\"step-icon-container svelte-z5hug7\"><img class=\"step-icon svelte-z5hug7\" alt=\"\"/></div>"), root_1$68 = /* @__PURE__ */ from_html("<div class=\"step-index-container svelte-z5hug7\"><svg class=\"step-spinner svelte-z5hug7\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-opacity=\"0.25\" stroke-width=\"3\"></circle><path d=\"M12 3a9 9 0 0 1 9 9\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"></path></svg></div>"), root_2$53 = /* @__PURE__ */ from_html("<div class=\"step-index-container svelte-z5hug7\"><div class=\"step-index-text svelte-z5hug7\"> </div></div>"), root_3$47 = /* @__PURE__ */ from_html("<div class=\"step-badge svelte-z5hug7\"><!></div>"), root_4$40 = /* @__PURE__ */ from_html("<div><!> <div class=\"step-text svelte-z5hug7\"> </div> <!> <div class=\"separator svelte-z5hug7\"></div></div>"), $$css$136 = {
 	hash: "svelte-z5hug7",
 	code: ".step.svelte-z5hug7 {display:flex;flex-direction:var(--step-flex-direction, row);align-items:center;\n    /* Lets a step's own box grow to fill a --step-container-flex share of the\n       Stepper row — a prerequisite for the separator below to have any free\n       space to grow into. Default 0 keeps a step sized to its content. */flex-grow:var(--step-flex-grow, 0);}.step-vertical.svelte-z5hug7 {--step-flex-direction: column;align-items:flex-start;}\n\n  /* Mirrors Stepper.svelte's per-status remapping so a bare Step themes itself. Only the\n     tokens Step actually renders are set here; the separator is Stepper's to draw. Each\n     chain terminates in the same literal Stepper uses, so the two agree by construction. */.status-completed.svelte-z5hug7 {--step-text-color: var(--step-text-completed-color, #1a7a44);--step-index-container-background-color: var(\n      --step-index-container-completed-background-color,\n      #1a7a44\n    );--step-index-container-border: var(--step-index-container-completed-border, none);}.status-active.svelte-z5hug7 {--step-text-color: var(--step-text-active-color, #2f3841);--step-index-container-background-color: var(\n      --step-index-container-active-background-color,\n      #2f3841\n    );--step-index-container-border: var(--step-index-container-active-border, none);}.status-failure.svelte-z5hug7 {--step-text-color: var(--step-text-failure-color, #e53935);--step-index-container-background-color: var(\n      --step-index-container-failure-background-color,\n      var(--stepper-status-failure-color, #e53935)\n    );--step-index-container-border: var(--step-index-container-failure-border, none);}.status-in-progress.svelte-z5hug7 {--step-text-color: var(--step-text-in-progress-color, #f59e0b);--step-index-container-background-color: var(\n      --step-index-container-in-progress-background-color,\n      var(--stepper-status-in-progress-color, #f59e0b)\n    );--step-index-container-border: var(--step-index-container-in-progress-border, none);}.status-muted.svelte-z5hug7 {--step-text-color: var(--step-text-muted-color, #667080);--step-index-container-background-color: var(\n      --step-index-container-muted-background-color,\n      #c9d2db\n    );\n    /* The circle is pale, so the numeral cannot inherit the white used on every other\n       status — that measured 1.53:1. #2f3841 is the same literal the active status\n       already uses for text, and reads at 7.79:1 here. */--step-index-color: var(--step-index-muted-color, #2f3841);--step-index-container-border: var(--step-index-container-muted-border, none);--step-index-container-height: var(--step-index-container-muted-height, 20px);--step-index-container-width: var(--step-index-container-muted-width, 20px);--step-index-font-size: var(--step-index-muted-font-size, 10px);}\n\n  /* status-pending sets nothing — it is the neutral default already in .step-index-container. */.step-index-container.svelte-z5hug7 {display:flex;justify-content:center;align-items:center;height:var(--step-index-container-height, 30px);width:var(--step-index-container-width, 30px);border-radius:var(--step-index-container-radius, 50%);background-color:var(--step-index-container-background-color, #55627a);\n    /* No border today, so the fallback is `none` — an existing consumer that sets\n       nothing renders byte-identically. Shared with .step-icon-container below so\n       a status override (see Stepper.svelte) themes the circle whichever of the\n       two mutually-exclusive renders is showing. */border:var(--step-index-container-border, none);color:var(--step-index-color, white);flex-shrink:0;}.step-icon-container.svelte-z5hug7 {display:flex;justify-content:center;align-items:center;height:var(--step-index-container-height, 30px);width:var(--step-index-container-width, 30px);border-radius:var(--step-index-container-radius, 50%);background-color:var(--step-index-container-background-color, #55627a);border:var(--step-index-container-border, none);flex-shrink:0;overflow:hidden;}.step-icon.svelte-z5hug7 {width:var(--step-icon-size, 18px);height:var(--step-icon-size, 18px);object-fit:contain;}.step-spinner.svelte-z5hug7 {width:var(--step-spinner-size, 18px);height:var(--step-spinner-size, 18px);\n    animation: svelte-z5hug7-stepper-spin var(--step-spinner-animation-duration, var(--motion-duration, 0.8s))\n      var(--step-spinner-animation-easing, var(--motion-easing, linear)) infinite;}\n\n  @keyframes svelte-z5hug7-stepper-spin {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }.separator.svelte-z5hug7 {display:var(--stepper-separator-display, var(--separator-display, block));height:var(--stepper-separator-height, var(--separator-height, 1px));width:var(--stepper-separator-width, var(--separator-width, 50px));\n    /* 0 keeps the separator pinned to its width above; set alongside --step-flex-grow\n       and --step-container-flex to let it stretch into a card's remaining width. */flex-grow:var(--stepper-separator-flex-grow, 0);margin:var(--stepper-separator-margin, var(--separator-margin, 0px 12px 0px 12px));background-image:var(\n      --stepper-separator-background-image,\n      var(\n        --separator-background-image,\n        repeating-linear-gradient(\n          to right,\n          var(\n            --stepper-separator-background-image-color,\n            var(--separator-background-image-color, #798fa5cc)\n          ),\n          var(\n              --stepper-separator-background-image-color,\n              var(--separator-background-image-color, #798fa5cc)\n            )\n            6px,\n          transparent 6px,\n          transparent 10px\n        )\n      )\n    );}.step-vertical.svelte-z5hug7 .separator:where(.svelte-z5hug7) {height:var(--stepper-separator-vertical-height, 32px);width:var(--stepper-separator-vertical-width, 1px);margin:var(--stepper-separator-vertical-margin, 4px 0px 4px 14px);background-image:repeating-linear-gradient(\n      to bottom,\n      var(\n        --stepper-separator-background-image-color,\n        var(--separator-background-image-color, #798fa5cc)\n      ),\n      var(\n          --stepper-separator-background-image-color,\n          var(--separator-background-image-color, #798fa5cc)\n        )\n        6px,\n      transparent 6px,\n      transparent 10px\n    );}.step-text.svelte-z5hug7 {margin:var(--step-text-margin, 0px 0px 0px 12px);font-size:var(--step-text-font-size, 12px);\n    /* No font-weight is set today, so the div inherits the browser default\n       `normal` — that is the literal fallback, keeping an existing consumer\n       byte-identical. */font-weight:var(--step-text-font-weight, normal);color:var(--step-text-color, #55627a);}.step-vertical.svelte-z5hug7 .step-text:where(.svelte-z5hug7) {margin:var(--step-text-vertical-margin, 4px 0px 0px 0px);}.step-index-text.svelte-z5hug7 {font-size:var(--step-index-font-size, 14px);color:var(--step-index-color, white);}.step-badge.svelte-z5hug7 {margin:var(--step-badge-margin, 0 0 0 4px);}.step-vertical.svelte-z5hug7 .step-badge:where(.svelte-z5hug7) {margin:var(--step-badge-vertical-margin, 4px 0 0 0);}\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) {.step-spinner.svelte-z5hug7 {\n      animation: none;}\n  }"
 };
 function Step(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$135);
+	push(t, !0), append_styles$1(e, $$css$136);
 	let i = prop(t, "stepIndex", 7), a = prop(t, "label", 7), o = prop(t, "icon", 7), s = prop(t, "status", 7), c = prop(t, "badge", 7), l = prop(t, "orientation", 7, "horizontal"), u = prop(t, "classes", 7), f = prop(t, "ariaLabel", 7), p = prop(t, "testId", 7), h = prop(t, "suppressRoleAndTabindex", 7), S = prop(t, "onclick", 7), C = prop(t, "onkeydown", 7), k = `step-label-${n}`, R = () => {
 		S()?.({ selectedIndex: i() });
 	}, te = (e) => {
@@ -14038,7 +14038,7 @@ function Step(e, t) {
 	}, be = root_4$40();
 	let Me;
 	var Re = child(be), Ue = (e) => {
-		var t = root$74(), n = child(t);
+		var t = root$75(), n = child(t);
 		reset(t), template_effect(() => set_attribute(n, "src", o())), append(e, t);
 	}, it = (e) => {
 		append(e, root_1$68());
@@ -14083,12 +14083,12 @@ delegate(["click", "keydown"]), create_custom_element(Step, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/Stepper/Stepper.svelte
-var root$73 = /* @__PURE__ */ from_html("<div role=\"listitem\"><!></div>"), root_1$67 = /* @__PURE__ */ from_html("<div role=\"list\"></div>"), $$css$134 = {
+var root$74 = /* @__PURE__ */ from_html("<div role=\"listitem\"><!></div>"), root_1$67 = /* @__PURE__ */ from_html("<div role=\"list\"></div>"), $$css$135 = {
 	hash: "svelte-k2df9q",
 	code: ".container.svelte-k2df9q {display:flex;flex-direction:var(--container-flex-direction, row);flex-wrap:var(--container-flex-wrap, nowrap);align-items:center;}.container-vertical.svelte-k2df9q {--container-flex-direction: column;align-items:flex-start;}.step-container.svelte-k2df9q:last-child {--stepper-separator-display: none;}.step-container.svelte-k2df9q {display:flex;align-items:center;flex:var(--step-container-flex, 0 1 auto);}\n\n  /* status-completed: #24aa5a measured 2.89:1 as label text on the #fafafa demo\n     background and 3.01:1 behind the white step number — the same one-hue,\n     two-roles failure as in-progress below. #1a7a44 clears both (5.14:1 text,\n     5.37:1 white-on-it) and keeps the dark-mode override two blocks down\n     (unchanged, already legible at 5.72:1) from silently regressing now that\n     this literal no longer doubles as the dark-theme fallback too. */.status-completed.svelte-k2df9q {--step-text-color: var(--step-text-completed-color, #1a7a44);--stepper-separator-background-image-color: var(\n      --stepper-separator-background-image-completed-color,\n      #1a7a44\n    );--step-index-container-background-color: var(\n      --step-index-container-completed-background-color,\n      #1a7a44\n    );\n    /* No border existed for any status before this, so every one of these\n       per-status hooks falls back to `none` — byte-identical for a consumer\n       that sets nothing. */--step-index-container-border: var(--step-index-container-completed-border, none);}\n\n  /* Step.svelte keeps its own copy of every status class (`class:status-completed`\n     etc. on its own root <div>) so a bare, Stepper-less <Step> can theme itself —\n     see that file's comment. That copy sets the SAME custom properties directly\n     on the very element (or, for .step-text/.step-index-container below, the\n     parent of the very element) the color actually renders on. A directly\n     cascaded value always beats one merely inherited from an ancestor, no matter\n     how specific the ancestor's rule is — so Step's copy silently outranked every\n     literal set above for a Stepper-wrapped step, and the fix above alone never\n     reached the screen (verified by grepping both files: Step.svelte lines\n     140-174 duplicate exactly these three custom properties with the old,\n     failing literals). These two rules break the tie: :global() lets the\n     selector reach past Step's own component scope to .step-text/\n     .step-index-container directly, and three chained classes there\n     out-specificity Step's own single-class rule on each — while still\n     deferring to the identical --step-text-completed-color /\n     --step-index-container-completed-background-color hooks both files already\n     expose, so a consumer override behaves exactly as it did before this fix. */.status-completed.svelte-k2df9q .step-text {color:var(--step-text-completed-color, #1a7a44);}.status-completed.svelte-k2df9q .step-index-container,\n  .status-completed.svelte-k2df9q .step-icon-container {background-color:var(--step-index-container-completed-background-color, #1a7a44);}\n\n  /* status-active */.status-active.svelte-k2df9q {--step-text-color: var(--step-text-active-color, #2f3841);--stepper-separator-background-image-color: var(\n      --stepper-separator-background-image-active-color,\n      #2f3841\n    );--step-index-container-background-color: var(\n      --step-index-container-active-background-color,\n      #2f3841\n    );--step-index-container-border: var(--step-index-container-active-border, none);}\n\n  /* status-pending: previously had no override at all, so it fell through to\n     Step.svelte's neutral #798fa5cc default — an alpha-blended blue-grey that\n     measured 2.44:1 as label text and 2.55:1 behind the white step number on\n     the #fafafa demo background, the same one-hue-fails-both-roles shape as\n     in-progress below (alpha compositing only makes it worse). #55627a is an\n     opaque step down the same blue-grey family and clears both roles. */.status-pending.svelte-k2df9q {--step-text-color: var(--step-text-pending-color, #55627a);--stepper-separator-background-image-color: var(\n      --stepper-separator-background-image-pending-color,\n      #55627a\n    );--step-index-container-background-color: var(\n      --step-index-container-pending-background-color,\n      #55627a\n    );--step-index-container-border: var(--step-index-container-pending-border, none);}\n\n  /* status-failure: #e53935 measured 4.05:1 as label text and 4.23:1 behind the\n     white step number on the #fafafa demo background — both just under the\n     4.5:1 minimum for this component's 12px/14px (non-large) text. #c62828\n     clears both (5.39:1 text, 5.62:1 white-on-it). */.status-failure.svelte-k2df9q {--step-text-color: var(--step-text-failure-color, #c62828);--stepper-separator-background-image-color: var(\n      --stepper-separator-background-image-failure-color,\n      #c62828\n    );--step-index-container-background-color: var(\n      --step-index-container-failure-background-color,\n      var(--stepper-status-failure-color, #c62828)\n    );--step-index-container-border: var(--step-index-container-failure-border, none);}\n\n  /* Same Step.svelte own-declaration-beats-inheritance tie as status-completed\n     above (Step.svelte lines 158-164 duplicate these with the old #e53935). */.status-failure.svelte-k2df9q .step-text {color:var(--step-text-failure-color, #c62828);}.status-failure.svelte-k2df9q .step-index-container,\n  .status-failure.svelte-k2df9q .step-icon-container {background-color:var(\n      --step-index-container-failure-background-color,\n      var(--stepper-status-failure-color, #c62828)\n    );}\n\n  /* status-in-progress: the reported defect. #f59e0b measured 2.06:1 as label\n     text on the #fafafa demo background and 2.15:1 behind the white step\n     number — one hue asked to do both jobs, failing both. #92400e (a darker\n     amber) clears both roles (6.79:1 text, 7.09:1 white-on-it). */.status-in-progress.svelte-k2df9q {--step-text-color: var(--step-text-in-progress-color, #92400e);--stepper-separator-background-image-color: var(\n      --stepper-separator-background-image-in-progress-color,\n      #92400e\n    );--step-index-container-background-color: var(\n      --step-index-container-in-progress-background-color,\n      var(--stepper-status-in-progress-color, #92400e)\n    );--step-index-container-border: var(--step-index-container-in-progress-border, none);}\n\n  /* Same Step.svelte own-declaration-beats-inheritance tie as status-completed\n     above (Step.svelte lines 167-173 duplicate these with the old #f59e0b). */.status-in-progress.svelte-k2df9q .step-text {color:var(--step-text-in-progress-color, #92400e);}.status-in-progress.svelte-k2df9q .step-index-container,\n  .status-in-progress.svelte-k2df9q .step-icon-container {background-color:var(\n      --step-index-container-in-progress-background-color,\n      var(--stepper-status-in-progress-color, #92400e)\n    );}\n\n  /* status-muted: a smaller, subtly-tinted marker for a de-emphasized or\n     supplementary step (e.g. an informational marker riding alongside a\n     primary rail). New opt-in status value — none of the statuses above are\n     touched, and a step only reaches these rules by setting status:'muted'\n     explicitly (resolveStatus never derives it). Reuses the same\n     --step-index-container-height/-width/-background-color, --step-text-color,\n     --stepper-separator-background-image-color and --step-index-container-border\n     hooks the other statuses already theme through, so a call site can further\n     override any of them the same way. */.status-muted.svelte-k2df9q {--step-text-color: var(--step-text-muted-color, #667080);--stepper-separator-background-image-color: var(\n      --stepper-separator-background-image-muted-color,\n      #c9d2db\n    );--step-index-container-background-color: var(\n      --step-index-container-muted-background-color,\n      #c9d2db\n    );\n    /* The circle is pale, so the numeral cannot inherit the white used on every other\n       status — that measured 1.53:1. #2f3841 is the same literal the active status\n       already uses for text, and reads at 7.79:1 here. */--step-index-color: var(--step-index-muted-color, #2f3841);--step-index-container-border: var(--step-index-container-muted-border, none);--step-index-container-height: var(--step-index-container-muted-height, 20px);--step-index-container-width: var(--step-index-container-muted-width, 20px);--step-index-font-size: var(--step-index-muted-font-size, 10px);}\n\n  /* Stepper's dark colours used to live here, as\n     `:global([data-theme='dark']) .status-… :global(.step-text)`. That works in\n     the Svelte build, where this stylesheet is in the document and can see\n     <html data-theme=\"dark\">, and it is dead in <sui-stepper>: the same\n     stylesheet is injected INTO the shadow root, and a selector there cannot\n     match an ancestor outside its own tree. Measured, not assumed -- the custom\n     element rendered the light literals on a dark page, #92400e in-progress\n     label at 1.68:1.\n\n     Every one of those rules resolved the SAME custom property the light rule\n     above does, differing only in its fallback literal, so setting that property\n     once in the dark token layer produces an identical result through the rule\n     that is already there -- and a custom property, unlike a selector, inherits\n     across the shadow boundary. See src/lib/styles/theme-dark.css. */"
 };
 function Stepper(e, t) {
-	push(t, !0), append_styles$1(e, $$css$134);
+	push(t, !0), append_styles$1(e, $$css$135);
 	let n = prop(t, "steps", 7), i = prop(t, "currentStepIndex", 7), a = prop(t, "orientation", 7, "horizontal"), o = prop(t, "classes", 7), s = prop(t, "testId", 7), c = prop(t, "suppressRoleAndTabindex", 7), l = prop(t, "suppressContainerTestId", 7), u = prop(t, "onhandlestepclick", 7), f = (e, t) => t === null ? e < i() ? "completed" : e === i() ? "active" : "pending" : t, p = /* @__PURE__ */ user_derived(() => typeof s() == "string" && !l() ? s() : null), h = /* @__PURE__ */ user_derived(() => [
 		"container",
 		a() === "vertical" ? "container-vertical" : "",
@@ -14146,7 +14146,7 @@ function Stepper(e, t) {
 	}, C = root_1$67();
 	return each(C, 21, n, index, (e, t, n) => {
 		let i = /* @__PURE__ */ user_derived(() => f(n, get(t).status ?? null)), o = /* @__PURE__ */ user_derived(() => get(t).testId ?? (typeof s() == "string" ? `${s()}-step-${n + 1}` : null));
-		var l = root$73();
+		var l = root$74();
 		Step(child(l), {
 			get onclick() {
 				return u();
@@ -14190,18 +14190,18 @@ create_custom_element(Stepper, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Stepper.wc.svelte
-var rest_excludes$65 = new Set([
+var rest_excludes$66 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$133 = {
+]), $$css$134 = {
 	hash: "svelte-1du7k5o",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-stepper-display, block);}"
 };
 function Stepper_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$133);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$65), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$134);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$66), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Stepper(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-stepper", create_custom_element(Stepper_wc, {
@@ -14232,12 +14232,12 @@ customElements.define("sui-stepper", create_custom_element(Stepper_wc, {
 }, [], [], { mode: "open" }));
 //#endregion
 //#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 = {
+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$73 = /* @__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$133 = {
 	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(\n      --tabs-arrow-transition,\n      color\n        var(--tabs-arrow-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--tabs-arrow-transition-easing, var(--motion-easing, ease))\n    );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(\n      --tabs-transition,\n      color var(--tabs-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--tabs-transition-easing, var(--motion-easing, ease)),\n      background var(--tabs-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--tabs-transition-easing, var(--motion-easing, ease))\n    );}\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(\n      --tabs-indicator-transition,\n      left var(--tabs-indicator-transition-duration, var(--motion-duration, 0.3s))\n        var(--tabs-indicator-transition-easing, var(--motion-easing, ease)),\n      width var(--tabs-indicator-transition-duration, var(--motion-duration, 0.3s))\n        var(--tabs-indicator-transition-easing, var(--motion-easing, ease))\n    );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(\n      --tabs-indicator-transition-vertical,\n      top var(--tabs-indicator-transition-vertical-duration, var(--motion-duration, 0.3s))\n        var(--tabs-indicator-transition-vertical-easing, var(--motion-easing, ease)),\n      height var(--tabs-indicator-transition-vertical-duration, var(--motion-duration, 0.3s))\n        var(--tabs-indicator-transition-vertical-easing, var(--motion-easing, ease))\n    );}\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);
+	push(t, !0), append_styles$1(e, $$css$133);
 	let n = prop(t, "items", 7), i = prop(t, "activeIndex", 15, 0), a = prop(t, "activeKey", 7), o = prop(t, "disabled", 7, !1), s = prop(t, "orientation", 7, "horizontal"), c = prop(t, "activationMode", 7, "automatic"), l = prop(t, "loop", 7, !0), u = prop(t, "dir", 7), f = prop(t, "testId", 7), p = prop(t, "scrollLeftIcon", 7), h = prop(t, "scrollRightIcon", 7), S = prop(t, "tab", 7), C = prop(t, "classes", 7), k = prop(t, "onchange", 7), R = prop(t, "onkeychange", 7), te = /* @__PURE__ */ user_derived(() => s() === "vertical"), ne = /* @__PURE__ */ user_derived(() => n().length > 0 && typeof n().at(0) == "object");
 	function re(e) {
 		return typeof e == "object" ? e : null;
@@ -14504,7 +14504,7 @@ function Tabs(e, t) {
 		}
 	}), void 0, void 0, void 0, "svelte-18eaq6o");
 	var Gt = child(Ht), qt = (e) => {
-		var t = root$72(), n = child(t), i = (e) => {
+		var t = root$73(), n = child(t), i = (e) => {
 			var t = comment();
 			snippet(first_child(t), p), append(e, t);
 		}, a = (e) => {
@@ -14639,19 +14639,19 @@ delegate([
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Tabs.wc.svelte
-var rest_excludes$64 = new Set([
+var rest_excludes$65 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"tabsDir"
-]), root$71 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"></span>"), root_1$65 = /* @__PURE__ */ from_html("<!> <span class=\"tabs-item-label\"> </span> <!>", 1), $$css$131 = {
+]), root$72 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"></span>"), root_1$65 = /* @__PURE__ */ from_html("<!> <span class=\"tabs-item-label\"> </span> <!>", 1), $$css$132 = {
 	hash: "svelte-1uio3zj",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-tabs-display, block);}"
 };
 function Tabs_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$131);
-	let n = prop(t, "tabsDir", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$64), a = /* @__PURE__ */ user_derived(() => t.orientation === "vertical"), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, i));
+	push(t, !0), append_styles$1(e, $$css$132);
+	let n = prop(t, "tabsDir", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$65), a = /* @__PURE__ */ user_derived(() => t.orientation === "vertical"), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, i));
 	return Tabs(e, spread_props(() => i, () => get(s), {
 		get dir() {
 			return n();
@@ -14701,7 +14701,7 @@ function Tabs_wc(e, t) {
 				var o = sibling(n, 2), l = child(o, !0);
 				reset(o);
 				var u = sibling(o, 2), f = (e) => {
-					var t = root$71();
+					var t = root$72();
 					template_effect(() => set_class(t, 1, `tabs-item-status status-${c() ?? ""}`)), append(e, t);
 				};
 				if_block(u, (e) => {
@@ -14773,12 +14773,12 @@ customElements.define("sui-tabs", create_custom_element(Tabs_wc, {
 ], [], { mode: "open" }));
 //#endregion
 //#region src/lib/assets/sun.svg?raw
-var sun_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=\"12\" cy=\"12\" r=\"5\"></circle>\n  <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"></line>\n  <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"></line>\n  <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"></line>\n  <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"></line>\n  <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"></line>\n  <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"></line>\n  <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"></line>\n  <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"></line>\n</svg>\n", moon_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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"></path>\n</svg>\n", monitor_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  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"></rect>\n  <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"></line>\n  <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"></line>\n</svg>\n", palette_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=\"13.5\" cy=\"6.5\" r=\"0.5\" fill=\"currentColor\"></circle>\n  <circle cx=\"17.5\" cy=\"10.5\" r=\"0.5\" fill=\"currentColor\"></circle>\n  <circle cx=\"8.5\" cy=\"7.5\" r=\"0.5\" fill=\"currentColor\"></circle>\n  <circle cx=\"6.5\" cy=\"12.5\" r=\"0.5\" fill=\"currentColor\"></circle>\n  <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"></path>\n</svg>\n", root$70 = /* @__PURE__ */ from_html("<span><!></span>"), root_1$64 = /* @__PURE__ */ from_html("<button aria-label=\"Switch theme\"></button>"), root_2$51 = /* @__PURE__ */ from_html("<button><span class=\"icon svelte-yg7rya\"><!></span></button>"), root_3$45 = /* @__PURE__ */ from_html("<div><div class=\"segment-indicator svelte-yg7rya\"></div> <!></div>"), $$css$130 = {
+var sun_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=\"12\" cy=\"12\" r=\"5\"></circle>\n  <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"></line>\n  <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"></line>\n  <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"></line>\n  <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"></line>\n  <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"></line>\n  <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"></line>\n  <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"></line>\n  <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"></line>\n</svg>\n", moon_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 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"></path>\n</svg>\n", monitor_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  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"></rect>\n  <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"></line>\n  <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"></line>\n</svg>\n", palette_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=\"13.5\" cy=\"6.5\" r=\"0.5\" fill=\"currentColor\"></circle>\n  <circle cx=\"17.5\" cy=\"10.5\" r=\"0.5\" fill=\"currentColor\"></circle>\n  <circle cx=\"8.5\" cy=\"7.5\" r=\"0.5\" fill=\"currentColor\"></circle>\n  <circle cx=\"6.5\" cy=\"12.5\" r=\"0.5\" fill=\"currentColor\"></circle>\n  <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z\"></path>\n</svg>\n", root$71 = /* @__PURE__ */ from_html("<span><!></span>"), root_1$64 = /* @__PURE__ */ from_html("<button aria-label=\"Switch theme\"></button>"), root_2$51 = /* @__PURE__ */ from_html("<button><span class=\"icon svelte-yg7rya\"><!></span></button>"), root_3$45 = /* @__PURE__ */ from_html("<div><div class=\"segment-indicator svelte-yg7rya\"></div> <!></div>"), $$css$131 = {
 	hash: "svelte-yg7rya",
 	code: ".toggle-button.svelte-yg7rya {position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--theme-switcher-size, 36px);height:var(--theme-switcher-size, 36px);padding:0;border:none;border-radius:var(--theme-switcher-border-radius, var(--radius, 4px));background-color:var(--theme-switcher-bg, transparent);cursor:pointer;color:var(--theme-switcher-icon-color, #374151);transition:background-color\n      var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))\n      var(--theme-switcher-transition-easing, var(--motion-easing, ease));font-family:inherit;}.toggle-button.svelte-yg7rya:hover {background-color:var(--theme-switcher-bg-hover, #f3f4f6);}.toggle-button.svelte-yg7rya:active {background-color:var(--theme-switcher-bg-pressed, #e5e7eb);}.icon.svelte-yg7rya {display:inline-flex;align-items:center;justify-content:center;width:var(--theme-switcher-icon-size, 18px);height:var(--theme-switcher-icon-size, 18px);transition:opacity var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))\n        var(--theme-switcher-transition-easing, var(--motion-easing, ease)),\n      transform var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))\n        var(--theme-switcher-transition-easing, var(--motion-easing, ease));}.icon.svelte-yg7rya svg {width:100%;height:100%;}.toggle-button.svelte-yg7rya .icon:where(.svelte-yg7rya) {position:absolute;}.toggle-button.svelte-yg7rya .icon:where(.svelte-yg7rya):not(.active) {opacity:0;transform:scale(0.5) rotate(90deg);}.toggle-button.svelte-yg7rya .icon.active:where(.svelte-yg7rya) {opacity:1;transform:scale(1) rotate(0deg);}.segment-control.svelte-yg7rya {position:relative;display:inline-flex;align-items:center;gap:var(--theme-switcher-segment-gap, 2px);padding:var(--theme-switcher-segment-padding, 4px);background-color:var(--theme-switcher-segment-bg, #f3f4f6);border-radius:var(--theme-switcher-border-radius, var(--radius, 4px));}.segment-indicator.svelte-yg7rya {position:absolute;top:var(--theme-switcher-segment-padding, 4px);bottom:var(--theme-switcher-segment-padding, 4px);border-radius:var(--theme-switcher-segment-border-radius, var(--radius, 4px));background-color:var(--theme-switcher-segment-active-bg, #ffffff);box-shadow:var(--theme-switcher-segment-shadow, 0 1px 2px rgba(0, 0, 0, 0.1));transition:left var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))\n        var(--theme-switcher-transition-easing, var(--motion-easing, ease)),\n      width var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))\n        var(--theme-switcher-transition-easing, var(--motion-easing, ease));z-index:0;}.segment-button.svelte-yg7rya {position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--theme-switcher-segment-button-padding, 6px 10px);border:none;border-radius:var(--theme-switcher-segment-border-radius, var(--radius, 4px));background:transparent;cursor:pointer;color:var(--theme-switcher-icon-color, #374151);transition:color var(--theme-switcher-transition-duration, var(--motion-duration, 0.3s))\n      var(--theme-switcher-transition-easing, var(--motion-easing, ease));font-family:inherit;}.segment-button.selected.svelte-yg7rya {color:var(--theme-switcher-icon-color-active, #1f2937);}\n\n  /* Unlike the two progress-bar loaders elsewhere in this library, every\n     transition here moves between two states that are each fully meaningful\n     on their own (a background tint, an icon's shown/hidden pose, the\n     indicator's resting position, a label's active color) -- there is no\n     in-between frame that could be misread as a different state. Dropping the\n     transition just makes the swap instant instead of animated; nothing is\n     stranded mid-motion the way a freeze mid-fill would be. Four separate\n     rules declare `transition` in this file (toggle background, icon\n     opacity/transform, segment indicator left/width, segment label color) --\n     all four are covered here, not just the two the icon/indicator case calls\n     out, so no motion in this component is left unguarded. Lives in the\n     component's own <style> because that is the only stylesheet that reaches\n     inside the shadow root a custom-element consumer gets. */\n  @media (prefers-reduced-motion: reduce) {.toggle-button.svelte-yg7rya,\n    .icon.svelte-yg7rya,\n    .segment-indicator.svelte-yg7rya,\n    .segment-button.svelte-yg7rya {transition:none;}\n  }"
 };
 function ThemeSwitcher(e, t) {
-	push(t, !0), append_styles$1(e, $$css$130);
+	push(t, !0), append_styles$1(e, $$css$131);
 	let n = [
 		{
 			value: "light",
@@ -14874,7 +14874,7 @@ function ThemeSwitcher(e, t) {
 	}, Ue = comment(), it = first_child(Ue), at = (e) => {
 		var t = root_1$64();
 		each(t, 23, o, (e) => e.value, (e, t, n) => {
-			var i = root$70();
+			var i = root$71();
 			let o;
 			var s = child(i), c = (e) => {
 				var n = comment();
@@ -14925,18 +14925,18 @@ delegate(["click"]), create_custom_element(ThemeSwitcher, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/ThemeSwitcher.wc.svelte
-var rest_excludes$63 = new Set([
+var rest_excludes$64 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$129 = {
+]), $$css$130 = {
 	hash: "svelte-1tvr3q1",
 	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. The value\n     matches this component's own root element (inline-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-theme-switcher-display, inline-block);}"
 };
 function ThemeSwitcher_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$129);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$63), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$130);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$64), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	ThemeSwitcher(e, spread_props(() => n, () => get(a))), pop();
 }
 customElements.define("sui-theme-switcher", create_custom_element(ThemeSwitcher_wc, {
@@ -14963,13 +14963,13 @@ customElements.define("sui-theme-switcher", create_custom_element(ThemeSwitcher_
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Toggle/Toggle.svelte
-var root$69 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-1kpnf4s\"> </div>"), root_1$63 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-1kpnf4s\"> </div>"), root_2$50 = /* @__PURE__ */ from_html("<div><label class=\"text svelte-1kpnf4s\"> </label> <label class=\"switch svelte-1kpnf4s\"><input class=\"input-checkbox svelte-1kpnf4s\" type=\"checkbox\"/> <span class=\"slider round svelte-1kpnf4s\"></span></label></div> <!> <!>", 1), $$css$128 = {
+var root$70 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-1kpnf4s\"> </div>"), root_1$63 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-1kpnf4s\"> </div>"), root_2$50 = /* @__PURE__ */ from_html("<div><label class=\"text svelte-1kpnf4s\"> </label> <label class=\"switch svelte-1kpnf4s\"><input class=\"input-checkbox svelte-1kpnf4s\" type=\"checkbox\"/> <span class=\"slider round svelte-1kpnf4s\"></span></label></div> <!> <!>", 1), $$css$129 = {
 	hash: "svelte-1kpnf4s",
 	code: ".container.svelte-1kpnf4s {display:var(--toggle-container-display, flex);align-items:var(--toggle-container-align-items, center);gap:var(--toggle-container-gap, 8px);}.container.disabled.svelte-1kpnf4s {opacity:var(--toggle-disabled-opacity, 0.4);cursor:not-allowed;pointer-events:none;}.text.svelte-1kpnf4s {font-size:var(--toggle-text-font-size, 14px);font-weight:var(--toggle-text-font-weight, 400);color:var(--toggle-text-color, #4a4a4a);margin:var(--toggle-text-margin, 0px 8px 0px 0px);order:var(--toggle-text-order, 0);}.switch.svelte-1kpnf4s {position:relative;display:inline-block;width:var(--toggle-switch-width, 46px);height:var(--toggle-switch-height, 25px);}.switch.svelte-1kpnf4s .input-checkbox:where(.svelte-1kpnf4s) {opacity:0;width:0;height:0;}.slider.svelte-1kpnf4s {position:absolute;cursor:pointer;top:var(--toggle-slider-top, 0);left:var(--toggle-slider-left, 0);right:var(--toggle-slider-right, 0);bottom:var(--toggle-slider-bottom, 0);background-color:var(--slider-unchecked-color, #ccc);-webkit-transition:var(\n      --toggle-slider-transition,\n      all\n        var(--toggle-slider-transition-duration, var(--duration-slow, var(--motion-duration, 0.4s)))\n        var(--toggle-slider-transition-easing, var(--motion-easing, ease))\n    );transition:var(\n      --toggle-slider-transition,\n      all\n        var(--toggle-slider-transition-duration, var(--duration-slow, var(--motion-duration, 0.4s)))\n        var(--toggle-slider-transition-easing, var(--motion-easing, ease))\n    );}.slider.svelte-1kpnf4s:before {position:absolute;content:'';height:var(--toggle-ball-height, 23px);width:var(--toggle-ball-width, 23px);left:var(--toggle-slider-before-left, 2px);bottom:var(--toggle-slider-before-bottom, 1px);top:var(--toggle-slider-before-top, 1px);background-color:var(--toggle-slider-before-background-color, white);-webkit-transition:var(\n      --toggle-slider-transition,\n      all\n        var(--toggle-slider-transition-duration, var(--duration-slow, var(--motion-duration, 0.4s)))\n        var(--toggle-slider-transition-easing, var(--motion-easing, ease))\n    );transition:var(\n      --toggle-slider-transition,\n      all\n        var(--toggle-slider-transition-duration, var(--duration-slow, var(--motion-duration, 0.4s)))\n        var(--toggle-slider-transition-easing, var(--motion-easing, ease))\n    );}.input-checkbox.svelte-1kpnf4s:checked + .slider:where(.svelte-1kpnf4s) {background-color:var(--slider-checked-color, #2196f3);}.input-checkbox.svelte-1kpnf4s:focus + .slider:where(.svelte-1kpnf4s) {box-shadow:var(--toggle-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));}.input-checkbox.svelte-1kpnf4s:checked + .slider:where(.svelte-1kpnf4s):before {-webkit-transform:translateX(19px);-ms-transform:translateX(19px);transform:translateX(19px);}.slider.round.svelte-1kpnf4s {border-radius:var(--slider-border-radius, 23px);}.slider.round.svelte-1kpnf4s:before {border-radius:var(--slider-border-radius-before, 50%);}.field-error.svelte-1kpnf4s {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-1kpnf4s {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}"
 };
 function Toggle(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$128);
+	push(t, !0), append_styles$1(e, $$css$129);
 	let i = prop(t, "checked", 15, !1), a = prop(t, "text", 7, ""), o = prop(t, "disabled", 7, !1), s = prop(t, "testId", 7), c = prop(t, "classes", 7), l = prop(t, "id", 7), u = prop(t, "ariaLabel", 7), f = prop(t, "ariaLabelledby", 7), p = prop(t, "onclick", 7), h = prop(t, "name", 7), S = prop(t, "value", 7), C = prop(t, "required", 7, !1), k = prop(t, "form", 7), R = prop(t, "errorMessage", 7), te = prop(t, "infoMessage", 7), ne = prop(t, "invalid", 7, !1), re = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: R(),
 		info: te(),
@@ -15081,7 +15081,7 @@ function Toggle(e, t) {
 	var ct = sibling(at, 2), lt = child(ct);
 	remove_input_defaults(lt), next(2), reset(ct), reset(Ue);
 	var ut = sibling(Ue, 2), dt = (e) => {
-		var t = root$69(), n = child(t, !0);
+		var t = root$70(), n = child(t, !0);
 		reset(t), template_effect(() => {
 			set_attribute(t, "id", get(re).errorId), set_attribute(t, "data-pw", typeof s() == "string" ? `${s()}-error-message` : null), set_attribute(t, "testid", typeof s() == "string" ? `${s()}-error-message` : null), set_text(n, R());
 		}), append(e, t);
@@ -15121,7 +15121,7 @@ delegate(["click"]), create_custom_element(Toggle, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Toggle.wc.svelte
-var rest_excludes$62 = new Set([
+var rest_excludes$63 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
@@ -15129,13 +15129,13 @@ var rest_excludes$62 = new Set([
 	"inputId",
 	"inputAriaLabel",
 	"inputAriaLabelledby"
-]), $$css$127 = {
+]), $$css$128 = {
 	hash: "svelte-af9kqj",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-toggle-display, block);}"
 };
 function Toggle_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$127);
-	let n = prop(t, "inputId", 7, ""), i = prop(t, "inputAriaLabel", 7, ""), a = prop(t, "inputAriaLabelledby", 7, ""), o = /* @__PURE__ */ rest_props(t, rest_excludes$62), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o));
+	push(t, !0), append_styles$1(e, $$css$128);
+	let n = prop(t, "inputId", 7, ""), i = prop(t, "inputAriaLabel", 7, ""), a = prop(t, "inputAriaLabelledby", 7, ""), o = /* @__PURE__ */ rest_props(t, rest_excludes$63), s = t.$$host, c = /* @__PURE__ */ user_derived(() => dispatchEvents(s, o));
 	return Toggle(e, spread_props(() => o, () => get(c), {
 		get id() {
 			return n();
@@ -15229,13 +15229,13 @@ customElements.define("sui-toggle", create_custom_element(Toggle_wc, {
 }, [], [], { mode: "open" }, formAssociated({ checked: "checked" })));
 //#endregion
 //#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 = {
+var root$69 = /* @__PURE__ */ from_html("<div role=\"button\"><!></div>"), root_1$62 = /* @__PURE__ */ from_html("<!> <div><div class=\"accordion-content svelte-1p9ezsm\"><!></div></div>", 1), $$css$127 = {
 	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\n      var(\n        --accordion-transition,\n        var(--accordion-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n          var(--accordion-transition-easing, var(--ease-out, var(--motion-easing, ease-out)))\n      );}.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();
-	push(t, !0), append_styles$1(e, $$css$126);
+	push(t, !0), append_styles$1(e, $$css$127);
 	let i = prop(t, "expand", 15, !1), a = prop(t, "children", 7), o = prop(t, "trigger", 7), s = prop(t, "ontoggle", 7), c = prop(t, "triggerClasses", 7), l = prop(t, "classes", 7), u = prop(t, "testId", 7), f = prop(t, "disabled", 7, !1), p = prop(t, "panelId", 7), h = /* @__PURE__ */ user_derived(() => p() ?? `accordion-panel-${n}`), S = `accordion-trigger-${n}`;
 	function C() {
 		f() || (i(!i()), s()?.(i()));
@@ -15296,7 +15296,7 @@ function Accordion(e, t) {
 			p(e), flushSync();
 		}
 	}, R = root_1$62(), te = first_child(R), ne = (e) => {
-		var t = root$68();
+		var t = root$69();
 		let n;
 		snippet(child(t), o, () => ({ expanded: i() })), reset(t), template_effect(() => {
 			n = set_class(t, 1, `accordion-trigger ${c() ?? "" ?? ""}`, "svelte-1p9ezsm", n, { disabled: f() }), set_attribute(t, "id", S), set_attribute(t, "tabindex", f() ? -1 : 0), set_attribute(t, "aria-expanded", i()), set_attribute(t, "aria-controls", get(h)), set_attribute(t, "aria-disabled", f());
@@ -15327,18 +15327,18 @@ delegate(["click", "keydown"]), create_custom_element(Accordion, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Accordion.wc.svelte
-var rest_excludes$61 = new Set([
+var rest_excludes$62 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$125 = {
+]), $$css$126 = {
 	hash: "svelte-130fhb5",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-accordion-display, block);}"
 };
 function Accordion_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$125);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$61), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$126);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$62), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Accordion(e, spread_props(() => n, () => get(a), {
 		children: (e) => {
 			var n = comment();
@@ -15401,12 +15401,12 @@ function slide(e, { delay: t = 0, duration: n = 400, easing: i = cubic_out, axis
 }
 //#endregion
 //#region src/lib/Banner/Banner.svelte
-var root$67 = /* @__PURE__ */ from_html("<div class=\"banner-icon svelte-w23dzo\"><!></div>"), root_1$61 = /* @__PURE__ */ from_html("<div class=\"banner-title svelte-w23dzo\"><!></div>"), root_2$49 = /* @__PURE__ */ from_html("<span class=\"banner-link-text svelte-w23dzo\"> </span>"), root_3$44 = /* @__PURE__ */ from_html("<div class=\"banner-right svelte-w23dzo\"><!></div>"), root_4$38 = /* @__PURE__ */ from_html("<div class=\"banner-dismiss svelte-w23dzo\"><!></div>"), root_5$33 = /* @__PURE__ */ from_html("<div><!> <div class=\"banner-body svelte-w23dzo\"><!> <div class=\"banner-text svelte-w23dzo\"> <!></div></div> <!> <!></div>"), $$css$124 = {
+var root$68 = /* @__PURE__ */ from_html("<div class=\"banner-icon svelte-w23dzo\"><!></div>"), root_1$61 = /* @__PURE__ */ from_html("<div class=\"banner-title svelte-w23dzo\"><!></div>"), root_2$49 = /* @__PURE__ */ from_html("<span class=\"banner-link-text svelte-w23dzo\"> </span>"), root_3$44 = /* @__PURE__ */ from_html("<div class=\"banner-right svelte-w23dzo\"><!></div>"), root_4$38 = /* @__PURE__ */ from_html("<div class=\"banner-dismiss svelte-w23dzo\"><!></div>"), root_5$33 = /* @__PURE__ */ from_html("<div><!> <div class=\"banner-body svelte-w23dzo\"><!> <div class=\"banner-text svelte-w23dzo\"> <!></div></div> <!> <!></div>"), $$css$125 = {
 	hash: "svelte-w23dzo",
 	code: ".banner.svelte-w23dzo {display:flex;align-items:center;width:var(--banner-width, 100%);height:var(--banner-height);padding:var(--banner-padding, 10px 12px);gap:var(--banner-gap, 8px);justify-content:var(--banner-justify-content, center);background-color:var(--banner-background, #f0f4f8);color:var(--banner-color, #4d6174);font-family:var(--banner-font-family, inherit);font-size:var(--banner-font-size, 14px);font-weight:var(--banner-font-weight, 500);line-height:var(--banner-line-height, 1.3);border-bottom:var(--banner-border-bottom, none);border:var(--banner-border);border-radius:var(--banner-border-radius, var(--radius, 4px));cursor:var(--banner-cursor, pointer);position:var(--banner-position, sticky);top:var(--banner-top, 0);z-index:var(--banner-z-index, 100);box-sizing:border-box;}.banner-icon.svelte-w23dzo {display:flex;align-items:center;flex-shrink:0;color:var(--banner-icon-color, currentColor);}.banner-icon.svelte-w23dzo svg {width:var(--banner-icon-size, 18px);height:var(--banner-icon-size, 18px);}.banner-body.svelte-w23dzo {display:flex;flex-direction:column;overflow:hidden;gap:var(--banner-body-gap, 0);}.banner-title.svelte-w23dzo {font-weight:var(--banner-title-font-weight, inherit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.banner-text.svelte-w23dzo {overflow:var(--banner-text-overflow, hidden);text-overflow:var(--banner-text-ellipsis, ellipsis);white-space:var(--banner-white-space, nowrap);}.banner-link-text.svelte-w23dzo {color:var(--banner-link-color, #1d4ed8);margin-left:var(--banner-link-gap, 4px);}.banner-right.svelte-w23dzo {display:flex;align-items:center;flex-shrink:0;}.banner-dismiss.svelte-w23dzo {--button-color: transparent;--button-border: none;--button-padding: 2px;--button-border-radius: var(--banner-dismiss-border-radius, var(--radius, 4px));--button-text-color: var(--banner-dismiss-color, currentColor);--button-hover-color: var(--banner-dismiss-hover-background, rgba(0, 0, 0, 0.1));--cursor: inherit;display:flex;align-items:center;flex-shrink:0;}.banner-dismiss.svelte-w23dzo svg {width:var(--banner-dismiss-size, 14px);height:var(--banner-dismiss-size, 14px);}"
 };
 function Banner(e, t) {
-	push(t, !0), append_styles$1(e, $$css$124);
+	push(t, !0), append_styles$1(e, $$css$125);
 	let n = prop(t, "text", 7), i = prop(t, "icon", 7), a = prop(t, "linkText", 7), o = prop(t, "dismissible", 7, !1), s = prop(t, "visible", 15, !0), c = prop(t, "testId", 7), l = prop(t, "rightContent", 7), u = prop(t, "dismissIcon", 7), f = prop(t, "onclick", 7), p = prop(t, "ondismiss", 7), h = prop(t, "classes", 7), S = prop(t, "title", 7), C = prop(t, "role", 7, null), k = prop(t, "transitionDuration", 7), R = /* @__PURE__ */ user_derived(() => typeof f() == "function"), te = /* @__PURE__ */ user_derived(() => ["banner", h() ?? ""].filter((e) => e.length > 0).join(" "));
 	function ne(e) {
 		f()?.(e);
@@ -15504,7 +15504,7 @@ function Banner(e, t) {
 		}
 	}, Me = comment(), Re = first_child(Me), Ue = (e) => {
 		var t = root_5$33(), s = child(t), f = (e) => {
-			var t = root$67();
+			var t = root$68();
 			snippet(child(t), i), reset(t), append(e, t);
 		};
 		if_block(s, (e) => {
@@ -15584,19 +15584,19 @@ delegate(["click", "keydown"]), create_custom_element(Banner, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Banner.wc.svelte
-var rest_excludes$60 = new Set([
+var rest_excludes$61 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"bannerRole"
-]), $$css$123 = {
+]), $$css$124 = {
 	hash: "svelte-rv5uft",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-banner-display, block);}"
 };
 function Banner_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$123);
-	let n = prop(t, "bannerRole", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$60), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
+	push(t, !0), append_styles$1(e, $$css$124);
+	let n = prop(t, "bannerRole", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$61), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
 	return Banner(e, spread_props(() => i, () => get(o), {
 		get role() {
 			return n();
@@ -15704,12 +15704,12 @@ customElements.define("sui-banner", create_custom_element(Banner_wc, {
 ], [], { mode: "open" }));
 //#endregion
 //#region src/lib/assets/lock.svg?raw
-var lock_default = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z\" fill=\"currentColor\"/>\n</svg>\n", root$66 = /* @__PURE__ */ from_html("<div class=\"tab-bar svelte-qac8se\"><div class=\"tab svelte-qac8se\"> </div></div>"), root_1$60 = /* @__PURE__ */ from_html("<span class=\"lock-icon svelte-qac8se\"></span>"), root_2$48 = /* @__PURE__ */ from_html("<div class=\"addressbar-row svelte-qac8se\"><div class=\"addressbar svelte-qac8se\"><!> <span class=\"url-text svelte-qac8se\"> </span></div></div>"), root_3$43 = /* @__PURE__ */ from_html("<div><div class=\"chrome svelte-qac8se\"><div class=\"titlebar svelte-qac8se\"><div class=\"dots svelte-qac8se\"><span class=\"dot close svelte-qac8se\"></span> <span class=\"dot minimize svelte-qac8se\"></span> <span class=\"dot maximize svelte-qac8se\"></span></div> <!></div> <!></div> <div class=\"content svelte-qac8se\"><!></div></div>"), $$css$122 = {
+var lock_default = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1v2z\" fill=\"currentColor\"/>\n</svg>\n", root$67 = /* @__PURE__ */ from_html("<div class=\"tab-bar svelte-qac8se\"><div class=\"tab svelte-qac8se\"> </div></div>"), root_1$60 = /* @__PURE__ */ from_html("<span class=\"lock-icon svelte-qac8se\"></span>"), root_2$48 = /* @__PURE__ */ from_html("<div class=\"addressbar-row svelte-qac8se\"><div class=\"addressbar svelte-qac8se\"><!> <span class=\"url-text svelte-qac8se\"> </span></div></div>"), root_3$43 = /* @__PURE__ */ from_html("<div><div class=\"chrome svelte-qac8se\"><div class=\"titlebar svelte-qac8se\"><div class=\"dots svelte-qac8se\"><span class=\"dot close svelte-qac8se\"></span> <span class=\"dot minimize svelte-qac8se\"></span> <span class=\"dot maximize svelte-qac8se\"></span></div> <!></div> <!></div> <div class=\"content svelte-qac8se\"><!></div></div>"), $$css$123 = {
 	hash: "svelte-qac8se",
 	code: ".browser.svelte-qac8se {width:var(--browser-width, 100%);max-width:var(--browser-max-width);border:var(--browser-border, 1px solid #d1d5db);overflow:hidden;display:flex;flex-direction:column;}.browser.rounded.svelte-qac8se {border-radius:var(--browser-border-radius, var(--radius, 4px));}.browser.shadow.svelte-qac8se {box-shadow:var(--browser-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));}\n\n  /* Light variant */.browser.light.svelte-qac8se .chrome:where(.svelte-qac8se) {background-color:var(--browser-chrome-bg, #f3f4f6);color:var(--browser-chrome-color, #374151);}.browser.light.svelte-qac8se .tab:where(.svelte-qac8se) {background-color:var(--browser-tab-bg, #ffffff);color:var(--browser-tab-color, #374151);}.browser.light.svelte-qac8se .addressbar:where(.svelte-qac8se) {background-color:var(--browser-addressbar-bg, #ffffff);border:var(--browser-addressbar-border, 1px solid #e5e7eb);}\n\n  /* Dark variant */.browser.dark.svelte-qac8se .chrome:where(.svelte-qac8se) {background-color:var(--browser-chrome-bg, #1f2937);color:var(--browser-chrome-color, #d1d5db);}.browser.dark.svelte-qac8se .tab:where(.svelte-qac8se) {background-color:var(--browser-tab-bg, #374151);color:var(--browser-tab-color, #d1d5db);}.browser.dark.svelte-qac8se .addressbar:where(.svelte-qac8se) {background-color:var(--browser-addressbar-bg, #111827);border:var(--browser-addressbar-border, 1px solid #374151);}.chrome.svelte-qac8se {display:flex;flex-direction:column;}.titlebar.svelte-qac8se {display:flex;align-items:center;padding:var(--browser-titlebar-padding, 12px 16px);gap:12px;}.dots.svelte-qac8se {display:flex;gap:var(--browser-dot-gap, 8px);flex-shrink:0;}.dot.svelte-qac8se {width:var(--browser-dot-size, 12px);height:var(--browser-dot-size, 12px);border-radius:50%;}.dot.close.svelte-qac8se {background-color:var(--browser-dot-close-bg, #ef4444);}.dot.minimize.svelte-qac8se {background-color:var(--browser-dot-minimize-bg, #f59e0b);}.dot.maximize.svelte-qac8se {background-color:var(--browser-dot-maximize-bg, #22c55e);}.tab-bar.svelte-qac8se {display:flex;align-items:flex-end;flex:1;}.tab.svelte-qac8se {padding:var(--browser-tab-padding, 6px 16px);border-radius:var(--browser-tab-border-radius, var(--radius, 4px) var(--radius, 4px) 0 0);font-size:var(--browser-tab-font-size, 13px);font-family:var(--browser-tab-font-family, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}.addressbar-row.svelte-qac8se {padding:var(--browser-addressbar-padding, 8px 16px);}.addressbar.svelte-qac8se {display:flex;align-items:center;gap:8px;padding:0 12px;height:var(--browser-addressbar-height, 32px);border-radius:var(--browser-addressbar-border-radius, var(--radius, 4px));font-size:var(--browser-addressbar-font-size, 13px);font-family:var(--browser-addressbar-font-family, inherit);}.lock-icon.svelte-qac8se {display:flex;flex-shrink:0;color:var(--browser-lock-color, #6b7280);}.url-text.svelte-qac8se {color:var(--browser-addressbar-color, #6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.content.svelte-qac8se {background-color:var(--browser-content-bg, #ffffff);min-height:var(--browser-content-min-height, 200px);overflow:var(--browser-content-overflow, hidden);}"
 };
 function Browser(e, t) {
-	push(t, !0), append_styles$1(e, $$css$122);
+	push(t, !0), append_styles$1(e, $$css$123);
 	let n = prop(t, "url", 7, ""), i = prop(t, "title", 7, ""), a = prop(t, "showAddressBar", 7, !0), o = prop(t, "showTabBar", 7, !1), s = prop(t, "variant", 7, "light"), c = prop(t, "shadow", 7, !0), l = prop(t, "rounded", 7, !0), u = prop(t, "testId", 7), f = prop(t, "lockIcon", 7), p = prop(t, "children", 7), h = prop(t, "classes", 7);
 	var S = {
 		get url() {
@@ -15781,7 +15781,7 @@ function Browser(e, t) {
 	}, C = root_3$43();
 	let k;
 	var R = child(C), te = child(R), ne = sibling(child(te), 2), re = (e) => {
-		var t = root$66(), n = child(t), a = child(n, !0);
+		var t = root$67(), n = child(t), a = child(n, !0);
 		reset(n), reset(t), template_effect(() => set_text(a, i())), append(e, t);
 	};
 	if_block(ne, (e) => {
@@ -15832,19 +15832,19 @@ create_custom_element(Browser, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Browser.wc.svelte
-var rest_excludes$59 = new Set([
+var rest_excludes$60 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"browserTitle"
-]), root$65 = /* @__PURE__ */ from_html("<span class=\"lock-icon\"></span>"), $$css$121 = {
+]), root$66 = /* @__PURE__ */ from_html("<span class=\"lock-icon\"></span>"), $$css$122 = {
 	hash: "svelte-1fx2ot7",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-browser-display, block);}"
 };
 function Browser_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$121);
-	let n = prop(t, "browserTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$59);
+	push(t, !0), append_styles$1(e, $$css$122);
+	let n = prop(t, "browserTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$60);
 	return Browser(e, spread_props(() => i, {
 		get title() {
 			return n();
@@ -15856,7 +15856,7 @@ function Browser_wc(e, t) {
 		lockIcon: (e) => {
 			var n = comment();
 			slot(first_child(n), t, "lock-icon", {}, (e) => {
-				var t = root$65();
+				var t = root$66();
 				html(t, () => lock_default, !0), reset(t), append(e, t);
 			}), append(e, n);
 		},
@@ -15914,20 +15914,20 @@ customElements.define("sui-browser", create_custom_element(Browser_wc, {
 }, ["default", "lock-icon"], [], { mode: "open" }));
 //#endregion
 //#region src/wc/components/Button.wc.svelte
-var rest_excludes$58 = new Set([
+var rest_excludes$59 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"buttonAriaExpanded",
 	"buttonAriaLabel"
-]), $$css$120 = {
+]), $$css$121 = {
 	hash: "svelte-94kscb",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-button-display, block);}"
 };
 function Button_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$120);
-	let n = prop(t, "buttonAriaExpanded", 7), i = prop(t, "buttonAriaLabel", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$58), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
+	push(t, !0), append_styles$1(e, $$css$121);
+	let n = prop(t, "buttonAriaExpanded", 7), i = prop(t, "buttonAriaLabel", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$59), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
 	return Button(e, spread_props(() => a, () => get(s), {
 		get ariaLabel() {
 			return i();
@@ -16072,12 +16072,12 @@ customElements.define("sui-button", create_custom_element(Button_wc, {
 }, ["icon", "default"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/CheckListItem/CheckListItem.svelte
-var root$64 = /* @__PURE__ */ from_html("<span> </span>"), root_1$59 = /* @__PURE__ */ from_html("<div><div class=\"checkbox-wrapper svelte-1el64om\"><!></div> <!></div>"), $$css$119 = {
+var root$65 = /* @__PURE__ */ from_html("<span> </span>"), root_1$59 = /* @__PURE__ */ from_html("<div><div class=\"checkbox-wrapper svelte-1el64om\"><!></div> <!></div>"), $$css$120 = {
 	hash: "svelte-1el64om",
 	code: ".container.svelte-1el64om {display:var(--check-list-item-display, flex);align-items:var(--check-list-item-align-items, center);width:var(--check-list-item-width, 100%);padding:var(--check-list-item-padding);gap:var(--check-list-item-gap, 8px);}.container.disabled.svelte-1el64om {cursor:not-allowed;}.checkbox-wrapper.svelte-1el64om {flex-shrink:0;}.container.disabled.svelte-1el64om .checkbox-wrapper:where(.svelte-1el64om) {--checkbox-disabled-opacity: var(--check-list-item-disabled-opacity, 0.4);}.text.svelte-1el64om {font-size:var(--check-list-item-text-size, 14px);color:var(--check-list-item-text-color, inherit);}.text.checked.svelte-1el64om {color:var(--check-list-item-checked-text-color, inherit);font-weight:var(--check-list-item-checked-font-weight, inherit);}"
 };
 function CheckListItem(e, t) {
-	push(t, !0), append_styles$1(e, $$css$119);
+	push(t, !0), append_styles$1(e, $$css$120);
 	let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "checkboxLabel", 7), s = prop(t, "testId", 7), c = prop(t, "onclick", 7), l = prop(t, "classes", 7);
 	function u(e) {
 		i(e), c()?.(i());
@@ -16146,7 +16146,7 @@ function CheckListItem(e, t) {
 		var t = comment();
 		snippet(first_child(t), o), append(e, t);
 	}, R = (e) => {
-		var t = root$64();
+		var t = root$65();
 		let a;
 		var o = child(t, !0);
 		reset(t), template_effect(() => {
@@ -16170,23 +16170,23 @@ create_custom_element(CheckListItem, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/CheckListItem.wc.svelte
-var rest_excludes$57 = new Set([
+var rest_excludes$58 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), root$63 = /* @__PURE__ */ from_html("<span> </span>"), $$css$118 = {
+]), root$64 = /* @__PURE__ */ from_html("<span> </span>"), $$css$119 = {
 	hash: "svelte-vd3kn6",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-check-list-item-display, block);}"
 };
 function CheckListItem_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$118);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$57), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$119);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$58), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	CheckListItem(e, spread_props(() => n, () => get(a), {
 		checkboxLabel: (e) => {
 			var n = comment();
 			slot(first_child(n), t, "checkbox-label", {}, (e) => {
-				var n = root$63();
+				var n = root$64();
 				let i;
 				var a = child(n, !0);
 				reset(n), template_effect(() => {
@@ -16261,13 +16261,13 @@ function moveWithinChoiceboxGroup(e, t) {
 }
 //#endregion
 //#region src/lib/Choicebox/Choicebox.svelte
-var root$62 = /* @__PURE__ */ from_html("<span class=\"indicator-icon svelte-1s9or1q\"></span>"), root_1$58 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"><!></span>"), root_2$47 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-1s9or1q\"> </div>"), root_3$42 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-1s9or1q\"> </div>"), root_4$37 = /* @__PURE__ */ from_html("<div><input class=\"native-control svelte-1s9or1q\" aria-hidden=\"true\"/> <!> <!></div> <!> <!>", 1), $$css$117 = {
+var root$63 = /* @__PURE__ */ from_html("<span class=\"indicator-icon svelte-1s9or1q\"></span>"), root_1$58 = /* @__PURE__ */ from_html("<span aria-hidden=\"true\"><!></span>"), root_2$47 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-1s9or1q\"> </div>"), root_3$42 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-1s9or1q\"> </div>"), root_4$37 = /* @__PURE__ */ from_html("<div><input class=\"native-control svelte-1s9or1q\" aria-hidden=\"true\"/> <!> <!></div> <!> <!>", 1), $$css$118 = {
 	hash: "svelte-1s9or1q",
 	code: ".native-control.svelte-1s9or1q {position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;}.field-error.svelte-1s9or1q {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-1s9or1q {color:var(--field-info-color, #6b7280);font-size:var(--field-info-font-size, 12px);margin:var(--field-info-margin, 4px 0 0 0);}.choicebox.svelte-1s9or1q {display:var(--choicebox-display, flex);align-items:var(--choicebox-align-items, center);padding:var(--choicebox-padding, 16px);border:var(--choicebox-border, 2px solid #d0d0d0);border-radius:var(--choicebox-border-radius, var(--radius, 4px));background:var(--choicebox-background, #ffffff);gap:var(--choicebox-gap, 12px);cursor:var(--choicebox-cursor, pointer);font-family:var(--choicebox-font-family, inherit);transition:var(\n      --choicebox-transition,\n      border-color\n        var(--choicebox-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--choicebox-transition-easing, var(--motion-easing, ease)),\n      background\n        var(--choicebox-transition-duration, var(--duration-base, var(--motion-duration, 0.2s)))\n        var(--choicebox-transition-easing, var(--motion-easing, ease))\n    );-webkit-tap-highlight-color:transparent;}.choicebox.svelte-1s9or1q:focus-visible {outline:none;box-shadow:var(--choicebox-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));}\n\n  /* Exclude the selected state from hover: without :not(.selected) this rule\n     (specificity 0,3,0) outranks .choicebox.selected (0,2,0), so hovering a\n     selected card repaints it with the neutral hover border/fill until the\n     cursor leaves. Excluding selected lets .choicebox.selected show through. */.choicebox.svelte-1s9or1q:not(.disabled):not(.selected):hover {border-color:var(--choicebox-hover-border-color, #9e9e9e);background:var(--choicebox-hover-background, var(--choicebox-background, #ffffff));}.choicebox.selected.svelte-1s9or1q {border-color:var(--choicebox-selected-border-color, #2196f3);background:var(--choicebox-selected-background, var(--choicebox-background, #ffffff));}.choicebox.disabled.svelte-1s9or1q {opacity:var(--choicebox-disabled-opacity, 0.4);cursor:var(--choicebox-disabled-cursor, not-allowed);}.indicator.svelte-1s9or1q {flex:0 0 auto;order:var(--choicebox-indicator-order, 1);margin-inline-start:var(--choicebox-indicator-margin-inline-start, auto);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--choicebox-indicator-size, 20px);height:var(--choicebox-indicator-size, 20px);border:var(--choicebox-indicator-border, 2px solid #757575);background:var(--choicebox-indicator-background, transparent);transition:var(\n      --choicebox-indicator-transition,\n      background\n        var(\n          --choicebox-indicator-transition-duration,\n          var(--duration-base, var(--motion-duration, 0.2s))\n        )\n        var(--choicebox-indicator-transition-easing, var(--motion-easing, ease)),\n      border-color\n        var(\n          --choicebox-indicator-transition-duration,\n          var(--duration-base, var(--motion-duration, 0.2s))\n        )\n        var(--choicebox-indicator-transition-easing, var(--motion-easing, ease))\n    );}.indicator.radio.svelte-1s9or1q {border-radius:50%;}.indicator.checkbox.svelte-1s9or1q {border-radius:var(--choicebox-indicator-border-radius, var(--radius, 4px));}.indicator.selected.svelte-1s9or1q {border:var(--choicebox-indicator-selected-border, 2px solid #2196f3);background:var(--choicebox-indicator-selected-background, #2196f3);}.indicator.radio.selected.svelte-1s9or1q {box-shadow:inset 0 0 0 var(--choicebox-indicator-dot-inset, 4px)\n      var(--choicebox-background, #ffffff);}.indicator-icon.svelte-1s9or1q {display:flex;width:var(--choicebox-indicator-icon-size, 14px);height:var(--choicebox-indicator-icon-size, 14px);color:var(--choicebox-indicator-icon-color, #ffffff);}.indicator-icon.svelte-1s9or1q svg {width:100%;height:100%;}"
 };
 function Choicebox(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$117);
+	push(t, !0), append_styles$1(e, $$css$118);
 	let i = prop(t, "children", 7), a = prop(t, "selected", 15, !1), o = prop(t, "mode", 7, "radio"), s = prop(t, "disabled", 7, !1), c = prop(t, "showIndicator", 7, !0), l = prop(t, "testId", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "errorMessage", 7), h = prop(t, "infoMessage", 7), S = prop(t, "invalid", 7, !1), C = prop(t, "name", 7), k = prop(t, "value", 7, "on"), R = prop(t, "required", 7, !1), te = prop(t, "form", 7), ne = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: p(),
 		info: h(),
@@ -16414,7 +16414,7 @@ function Choicebox(e, t) {
 		var t = root_1$58();
 		let n;
 		var i = child(t), s = (e) => {
-			var t = root$62();
+			var t = root$63();
 			html(t, () => checkmark_default, !0), reset(t), append(e, t);
 		};
 		if_block(i, (e) => {
@@ -16467,18 +16467,18 @@ delegate(["click", "keydown"]), create_custom_element(Choicebox, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Choicebox.wc.svelte
-var rest_excludes$56 = new Set([
+var rest_excludes$57 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$116 = {
+]), $$css$117 = {
 	hash: "svelte-623mzf",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-choicebox-display, block);}"
 };
 function Choicebox_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$116);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$56), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$117);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$57), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Choicebox(e, spread_props(() => n, () => get(a), {
 		children: (e) => {
 			var n = comment();
@@ -16542,12 +16542,12 @@ customElements.define("sui-choicebox", create_custom_element(Choicebox_wc, {
 }, ["default"], [], { mode: "open" }, formAssociated({ checked: "selected" })));
 //#endregion
 //#region src/lib/Card/Card.svelte
-var root$61 = /* @__PURE__ */ from_html("<div class=\"card-title svelte-10nkiak\"><!></div>"), root_1$57 = /* @__PURE__ */ from_html("<div class=\"card-title svelte-10nkiak\"> </div>"), root_2$46 = /* @__PURE__ */ from_html("<div class=\"card-description svelte-10nkiak\"><!></div>"), root_3$41 = /* @__PURE__ */ from_html("<div class=\"card-description svelte-10nkiak\"> </div>"), root_4$36 = /* @__PURE__ */ from_html("<div class=\"card-header-right svelte-10nkiak\"><!></div>"), root_5$32 = /* @__PURE__ */ from_html("<div><div class=\"card-header-main svelte-10nkiak\"><!> <!></div> <!></div>"), root_6$28 = /* @__PURE__ */ from_html("<div><!></div>"), root_7$25 = /* @__PURE__ */ from_html("<footer class=\"card-footer svelte-10nkiak\"><!></footer>"), root_8$21 = /* @__PURE__ */ from_html("<!> <!> <!>", 1), $$css$115 = {
+var root$62 = /* @__PURE__ */ from_html("<div class=\"card-title svelte-10nkiak\"><!></div>"), root_1$57 = /* @__PURE__ */ from_html("<div class=\"card-title svelte-10nkiak\"> </div>"), root_2$46 = /* @__PURE__ */ from_html("<div class=\"card-description svelte-10nkiak\"><!></div>"), root_3$41 = /* @__PURE__ */ from_html("<div class=\"card-description svelte-10nkiak\"> </div>"), root_4$36 = /* @__PURE__ */ from_html("<div class=\"card-header-right svelte-10nkiak\"><!></div>"), root_5$32 = /* @__PURE__ */ from_html("<div><div class=\"card-header-main svelte-10nkiak\"><!> <!></div> <!></div>"), root_6$28 = /* @__PURE__ */ from_html("<div><!></div>"), root_7$25 = /* @__PURE__ */ from_html("<footer class=\"card-footer svelte-10nkiak\"><!></footer>"), root_8$21 = /* @__PURE__ */ from_html("<!> <!> <!>", 1), $$css$116 = {
 	hash: "svelte-10nkiak",
 	code: ".card.svelte-10nkiak {\n    /* Explicit so the root's layout doesn't depend on the browser default for\n       whichever tag svelte:element renders -- a <div> defaults to block and an\n       <a> defaults to inline, and an inline box ignores width/height entirely.\n       Pinning both here keeps anchor-mode cards byte-identical to div cards. */display:block;text-decoration:none;background:var(--card-background, inherit);border:var(--card-border, 1px solid currentColor);border-radius:var(--card-border-radius, var(--radius, 4px));overflow:var(--card-overflow, hidden);color:inherit;cursor:var(--card-cursor, inherit);box-shadow:var(--card-box-shadow, none);width:var(--card-width, auto);min-width:var(--card-min-width, 0);max-width:var(--card-max-width, none);height:var(--card-height, auto);max-height:var(--card-max-height, none);margin:var(--card-margin, 0);}.card-interactive.svelte-10nkiak {cursor:var(--card-cursor, pointer);}.card-interactive.svelte-10nkiak:focus-visible {outline:var(--card-focus-outline, 2px solid currentColor);outline-offset:var(--card-focus-outline-offset, 2px);}\n\n  /* stretch: fill parent height */.card-stretch.svelte-10nkiak {height:var(--card-stretch-height, 100%);display:flex;flex-direction:column;}\n\n  /* when stretch is on, content area should grow to fill remaining space */.card-stretch.svelte-10nkiak .card-content:where(.svelte-10nkiak) {flex:var(--card-content-flex, 1);}\n\n  /* when scrollable=true the child sets overflow-y:auto, so the card must not clip it */.card-has-scroll.svelte-10nkiak {overflow:visible;}\n\n  /* header row layout — base block flow; flex only applied when headerRight is present */.card-header.svelte-10nkiak {padding:var(--card-header-padding, 16px 16px 0);border-bottom:var(--card-header-border-bottom, none);}\n\n  /* flex layout activated only when headerRight snippet is provided */.card-header-split.svelte-10nkiak {display:flex;align-items:var(--card-header-align-items, flex-start);justify-content:space-between;gap:var(--card-header-gap, 8px);}.card-header-main.svelte-10nkiak {display:flex;flex-direction:column;flex:1;min-width:0;}.card-header-right.svelte-10nkiak {display:flex;align-items:var(--card-header-right-align-items, center);flex-shrink:0;}.card-title.svelte-10nkiak {font-size:var(--card-title-font-size, 16px);font-weight:var(--card-title-font-weight, 600);color:var(--card-title-color, inherit);}.card-description.svelte-10nkiak {font-size:var(--card-description-font-size, 14px);color:var(--card-description-color, inherit);opacity:var(--card-description-opacity, 0.8);margin-top:var(--card-description-margin-top, 4px);}.card-content.svelte-10nkiak {padding:var(--card-content-padding, 16px);}\n\n  /* scrollable content area */.card-content-scrollable.svelte-10nkiak {overflow-y:auto;max-height:var(--card-content-max-height, 400px);scrollbar-width:var(--card-content-scrollbar-width, thin);}\n\n  /* footer */.card-footer.svelte-10nkiak {padding:var(--card-footer-padding, 12px 16px);border-top:var(--card-footer-border-top, none);background:var(--card-footer-background, inherit);}"
 };
 function Card(e, t) {
-	push(t, !0), append_styles$1(e, $$css$115);
+	push(t, !0), append_styles$1(e, $$css$116);
 	let n = prop(t, "children", 7), i = prop(t, "title", 7), a = prop(t, "description", 7), o = prop(t, "titleSnippet", 7), s = prop(t, "descriptionSnippet", 7), c = prop(t, "classes", 7), l = prop(t, "testId", 7), u = prop(t, "onclick", 7), f = prop(t, "href", 7), p = prop(t, "target", 7), h = prop(t, "rel", 7), S = prop(t, "headerRight", 7), C = prop(t, "footer", 7), k = prop(t, "stretch", 7, !1), R = prop(t, "scrollable", 7, !1), te = prop(t, "cssVars", 7), ne = prop(t, "attrs", 7), re = prop(t, "as", 7), G = /* @__PURE__ */ user_derived(() => re() ?? (typeof f() == "string" && f().length > 0 ? "a" : "div")), be = /* @__PURE__ */ user_derived(() => get(G) === "a" && typeof f() == "string" && f().length > 0), Me = /* @__PURE__ */ user_derived(() => get(be) || typeof u() == "function"), Re = /* @__PURE__ */ user_derived(() => h() ?? (p()?.toLowerCase() === "_blank" ? "noopener noreferrer" : null)), Ue = /* @__PURE__ */ user_derived(() => te() ? Object.entries(te()).map(([e, t]) => `${e}: ${t}`).join("; ") : null), it = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.key === " " && e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
 	};
@@ -16685,7 +16685,7 @@ function Card(e, t) {
 			var t = root_5$32();
 			let n;
 			var c = child(t), l = child(c), u = (e) => {
-				var t = root$61();
+				var t = root$62();
 				snippet(child(t), o), reset(t), append(e, t);
 			}, f = (e) => {
 				var t = root_1$57(), n = child(t, !0);
@@ -16756,18 +16756,18 @@ create_custom_element(Card, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Card.wc.svelte
-var rest_excludes$55 = new Set([
+var rest_excludes$56 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"cardTitle"
-]), $$css$114 = {
+]), $$css$115 = {
 	hash: "svelte-1nyjxuh",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-card-display, block);}"
 };
 function Card_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$114);
+	push(t, !0), append_styles$1(e, $$css$115);
 	let n = (e) => {
 		var n = comment(), i = first_child(n), a = (e) => {
 			var n = comment();
@@ -16812,7 +16812,7 @@ function Card_wc(e, t) {
 		if_block(i, (e) => {
 			t.footer ? e(a) : e(o, -1);
 		}), append(e, n);
-	}, s = prop(t, "cardTitle", 7), c = /* @__PURE__ */ rest_props(t, rest_excludes$55), l = t.$$host.querySelector("[slot=\"title-snippet\"]") !== null, u = t.$$host.querySelector("[slot=\"description-snippet\"]") !== null, f = t.$$host.querySelector("[slot=\"header-right\"]") !== null, p = t.$$host.querySelector("[slot=\"footer\"]") !== null, h = t.$$host, S = /* @__PURE__ */ user_derived(() => dispatchEvents(h, c));
+	}, s = prop(t, "cardTitle", 7), c = /* @__PURE__ */ rest_props(t, rest_excludes$56), l = t.$$host.querySelector("[slot=\"title-snippet\"]") !== null, u = t.$$host.querySelector("[slot=\"description-snippet\"]") !== null, f = t.$$host.querySelector("[slot=\"header-right\"]") !== null, p = t.$$host.querySelector("[slot=\"footer\"]") !== null, h = t.$$host, S = /* @__PURE__ */ user_derived(() => dispatchEvents(h, c));
 	var C = {
 		get cardTitle() {
 			return s();
@@ -16904,12 +16904,12 @@ customElements.define("sui-card", create_custom_element(Card_wc, {
 ], [], { mode: "open" }));
 //#endregion
 //#region src/lib/EmptyState/EmptyState.svelte
-var root$60 = /* @__PURE__ */ from_html("<div class=\"empty-state-icon svelte-vmfces\"><!></div>"), root_1$56 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"><!></div>"), root_2$45 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"> </div>"), root_3$40 = /* @__PURE__ */ from_html("<div class=\"empty-state-actions svelte-vmfces\"><!></div>"), root_4$35 = /* @__PURE__ */ from_html("<div><!> <div class=\"empty-state-title svelte-vmfces\"><!></div> <!> <!></div>"), $$css$113 = {
+var root$61 = /* @__PURE__ */ from_html("<div class=\"empty-state-icon svelte-vmfces\"><!></div>"), root_1$56 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"><!></div>"), root_2$45 = /* @__PURE__ */ from_html("<div class=\"empty-state-description svelte-vmfces\"> </div>"), root_3$40 = /* @__PURE__ */ from_html("<div class=\"empty-state-actions svelte-vmfces\"><!></div>"), root_4$35 = /* @__PURE__ */ from_html("<div><!> <div class=\"empty-state-title svelte-vmfces\"><!></div> <!> <!></div>"), $$css$114 = {
 	hash: "svelte-vmfces",
 	code: ".empty-state.svelte-vmfces {display:flex;flex-direction:column;align-items:var(--empty-state-align-items, center);padding:var(--empty-state-padding, 32px 16px);text-align:var(--empty-state-text-align, center);gap:var(--empty-state-gap, 0px);color:inherit;}\n\n  /* Density-scoped fallbacks. Higher specificity than `.empty-state` alone, so\n     these only take over when `data-density` is actually set — no attribute,\n     no match, today's defaults above stand untouched. `--empty-state-padding`\n     and `--empty-state-gap` are read first in both cases, so an instance-level\n     override always wins over either density's default. */.empty-state[data-density='page'].svelte-vmfces {padding:var(--empty-state-padding, 48px 24px);gap:var(--empty-state-gap, 12px);}.empty-state[data-density='panel'].svelte-vmfces {padding:var(--empty-state-padding, 16px 12px);gap:var(--empty-state-gap, 4px);}.empty-state-icon.svelte-vmfces {width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);color:var(--empty-state-icon-color, currentColor);opacity:var(--empty-state-icon-opacity, 0.4);margin-bottom:var(--empty-state-icon-margin-bottom, 16px);display:flex;align-items:center;justify-content:center;}.empty-state-icon.svelte-vmfces svg {width:100%;height:100%;}.empty-state-title.svelte-vmfces {font-size:var(--empty-state-title-font-size, 16px);font-weight:var(--empty-state-title-font-weight, 600);color:var(--empty-state-title-color, inherit);}.empty-state-description.svelte-vmfces {font-size:var(--empty-state-description-font-size, 14px);color:var(--empty-state-description-color, inherit);opacity:var(--empty-state-description-opacity, 0.8);max-width:var(--empty-state-description-max-width, 360px);margin-top:4px;}.empty-state-actions.svelte-vmfces {display:var(--empty-state-actions-display, block);flex-direction:var(--empty-state-actions-flex-direction, row);align-items:var(--empty-state-actions-align-items, stretch);justify-content:var(--empty-state-actions-justify-content, normal);gap:var(--empty-state-actions-gap, 0);margin-top:var(--empty-state-actions-margin-top, 16px);}"
 };
 function EmptyState(e, t) {
-	push(t, !0), append_styles$1(e, $$css$113);
+	push(t, !0), append_styles$1(e, $$css$114);
 	let n = prop(t, "title", 7), i = prop(t, "description", 7), a = prop(t, "icon", 7), o = prop(t, "children", 7), s = prop(t, "classes", 7), c = prop(t, "testId", 7), l = prop(t, "titleSnippet", 7), u = prop(t, "descriptionSnippet", 7), f = prop(t, "density", 7);
 	var p = {
 		get title() {
@@ -16967,7 +16967,7 @@ function EmptyState(e, t) {
 			f(e), flushSync();
 		}
 	}, h = root_4$35(), S = child(h), C = (e) => {
-		var t = root$60();
+		var t = root$61();
 		snippet(child(t), a), reset(t), append(e, t);
 	};
 	if_block(S, (e) => {
@@ -17020,19 +17020,19 @@ create_custom_element(EmptyState, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/EmptyState.wc.svelte
-var rest_excludes$54 = new Set([
+var rest_excludes$55 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"emptyStateTitle"
-]), $$css$112 = {
+]), $$css$113 = {
 	hash: "svelte-xctx19",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-empty-state-display, block);}"
 };
 function EmptyState_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$112);
-	let n = prop(t, "emptyStateTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$54);
+	push(t, !0), append_styles$1(e, $$css$113);
+	let n = prop(t, "emptyStateTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$55);
 	return EmptyState(e, spread_props(() => i, {
 		get title() {
 			return n();
@@ -17106,13 +17106,13 @@ customElements.define("sui-empty-state", create_custom_element(EmptyState_wc, {
 ], [], { mode: "open" }));
 //#endregion
 //#region src/lib/FileInput/FileInput.svelte
-var root$59 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-445u0m\"> </div>"), root_1$55 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-445u0m\"> </div>"), root_2$44 = /* @__PURE__ */ from_html("<div role=\"button\"><input type=\"file\" class=\"file-input-hidden svelte-445u0m\" tabindex=\"-1\" aria-hidden=\"true\"/> <!></div> <!> <!>", 1), $$css$111 = {
+var root$60 = /* @__PURE__ */ from_html("<div role=\"alert\" class=\"field-error svelte-445u0m\"> </div>"), root_1$55 = /* @__PURE__ */ from_html("<div class=\"field-info svelte-445u0m\"> </div>"), root_2$44 = /* @__PURE__ */ from_html("<div role=\"button\"><input type=\"file\" class=\"file-input-hidden svelte-445u0m\" tabindex=\"-1\" aria-hidden=\"true\"/> <!></div> <!> <!>", 1), $$css$112 = {
 	hash: "svelte-445u0m",
 	code: ".field-error.svelte-445u0m {color:var(--file-input-error-color, #b3261e);font-size:var(--file-input-error-font-size, 12px);margin-top:var(--file-input-error-margin-top, 4px);}.field-info.svelte-445u0m {color:var(--file-input-info-color, #5f6368);font-size:var(--file-input-info-font-size, 12px);margin-top:var(--file-input-info-margin-top, 4px);}.file-input.svelte-445u0m {display:var(--file-input-display, inline-flex);flex-direction:var(--file-input-flex-direction, column);align-items:var(--file-input-align-items, center);justify-content:var(--file-input-justify-content, center);padding:var(--file-input-padding);border:var(--file-input-border);border-radius:var(--file-input-radius, var(--radius, 4px));background:var(--file-input-background);gap:var(--file-input-gap);text-align:var(--file-input-text-align, center);transition:var(--file-input-transition);cursor:pointer;}.file-input.svelte-445u0m:focus-visible {outline:var(--file-input-focus-outline);outline-offset:var(--file-input-focus-outline-offset);}.file-input-dragover.svelte-445u0m {background:var(--file-input-dragover-background);border-color:var(--file-input-dragover-border-color);}.file-input-disabled.svelte-445u0m {opacity:var(--file-input-disabled-opacity, 0.5);cursor:var(--file-input-disabled-cursor, not-allowed);pointer-events:none;}.file-input-hidden.svelte-445u0m {display:none;}"
 };
 function FileInput(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$111);
+	push(t, !0), append_styles$1(e, $$css$112);
 	let i = prop(t, "trigger", 7), a = prop(t, "accept", 7), o = prop(t, "multiple", 7, !1), s = prop(t, "maxSizeBytes", 7), c = prop(t, "disabled", 7, !1), l = prop(t, "testId", 7), u = prop(t, "classes", 7), f = prop(t, "onfiles", 7), p = prop(t, "onerror", 7), h = prop(t, "errorMessage", 7), S = prop(t, "infoMessage", 7), C = prop(t, "invalid", 7), k = /* @__PURE__ */ user_derived(() => describeField(n, {
 		error: h(),
 		info: S(),
@@ -17253,7 +17253,7 @@ function FileInput(e, t) {
 		disabled: c()
 	})), reset(ut);
 	var pt = sibling(ut, 2), mt = (e) => {
-		var t = root$59(), n = child(t, !0);
+		var t = root$60(), n = child(t, !0);
 		reset(t), template_effect(() => {
 			set_attribute(t, "id", get(k).errorId), set_attribute(t, "data-pw", typeof l() == "string" ? `${l()}-error-message` : null), set_attribute(t, "testid", typeof l() == "string" ? `${l()}-error-message` : null), set_text(n, h());
 		}), append(e, t);
@@ -17296,24 +17296,24 @@ delegate([
 }, [], ["openFilePicker"], { mode: "open" });
 //#endregion
 //#region src/wc/components/FileInput.wc.svelte
-var rest_excludes$53 = new Set([
+var rest_excludes$54 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), root$58 = /* @__PURE__ */ from_html("<button style=\"cursor: pointer;\"> </button>"), $$css$110 = {
+]), root$59 = /* @__PURE__ */ from_html("<button style=\"cursor: pointer;\"> </button>"), $$css$111 = {
 	hash: "svelte-1dri075",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-file-input-display, block);}"
 };
 function FileInput_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$110);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$53), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$111);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$54), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	FileInput(e, spread_props(() => n, () => get(a), {
 		trigger: (e, n) => {
 			let i = () => n?.().openFilePicker, a = () => n?.().dragOver, o = () => n?.().disabled;
 			var s = comment();
 			slot(first_child(s), t, "trigger", {}, (e) => {
-				var t = root$58(), n = child(t, !0);
+				var t = root$59(), n = child(t, !0);
 				reset(t), template_effect(() => {
 					t.disabled = o(), set_text(n, a() ? "Drop files here" : "Choose file");
 				}), delegated("click", t, function(...e) {
@@ -17364,12 +17364,12 @@ delegate(["click"]), customElements.define("sui-file-input", create_custom_eleme
 }, ["trigger"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/ContextMenu/ContextMenu.svelte
-var root$57 = /* @__PURE__ */ from_html("<div class=\"context-menu-separator svelte-1hf60pq\" role=\"separator\"></div>"), root_1$54 = /* @__PURE__ */ from_html("<img class=\"context-menu-item-icon svelte-1hf60pq\" alt=\"\"/>"), root_2$43 = /* @__PURE__ */ from_html("<span class=\"context-menu-item-shortcut svelte-1hf60pq\"> </span>"), root_3$39 = /* @__PURE__ */ from_html("<div role=\"menuitem\"><!> <span class=\"context-menu-item-label svelte-1hf60pq\"> </span> <!></div>"), root_4$34 = /* @__PURE__ */ from_html("<div class=\"context-menu-dropdown svelte-1hf60pq\" role=\"menu\" tabindex=\"-1\"></div>"), root_5$31 = /* @__PURE__ */ from_html("<div><!></div> <!>", 1), $$css$109 = {
+var root$58 = /* @__PURE__ */ from_html("<div class=\"context-menu-separator svelte-1hf60pq\" role=\"separator\"></div>"), root_1$54 = /* @__PURE__ */ from_html("<img class=\"context-menu-item-icon svelte-1hf60pq\" alt=\"\"/>"), root_2$43 = /* @__PURE__ */ from_html("<span class=\"context-menu-item-shortcut svelte-1hf60pq\"> </span>"), root_3$39 = /* @__PURE__ */ from_html("<div role=\"menuitem\"><!> <span class=\"context-menu-item-label svelte-1hf60pq\"> </span> <!></div>"), root_4$34 = /* @__PURE__ */ from_html("<div class=\"context-menu-dropdown svelte-1hf60pq\" role=\"menu\" tabindex=\"-1\"></div>"), root_5$31 = /* @__PURE__ */ from_html("<div><!></div> <!>", 1), $$css$110 = {
 	hash: "svelte-1hf60pq",
 	code: ".context-menu-container.svelte-1hf60pq {display:var(--context-menu-container-display, contents);}.context-menu-dropdown.svelte-1hf60pq {position:fixed;z-index:var(--context-menu-z-index, 1000);background-color:var(--context-menu-background-color, #ffffff);border:var(--context-menu-border, 1px solid #e0e0e0);border-radius:var(--context-menu-border-radius, var(--radius, 4px));box-shadow:var(--context-menu-box-shadow, 0px 4px 16px rgba(0, 0, 0, 0.12));min-width:var(--context-menu-min-width, 160px);max-height:var(--context-menu-max-height, 240px);overflow-y:auto;padding:var(--context-menu-padding, 4px 0);font-family:var(--context-menu-font-family, inherit);font-size:var(--context-menu-font-size, 14px);}.context-menu-item.svelte-1hf60pq {display:flex;align-items:center;padding:var(--context-menu-item-padding, 8px 12px);cursor:pointer;color:var(--context-menu-item-color, #333333);background-color:var(--context-menu-item-background-color, transparent);gap:var(--context-menu-item-gap, 8px);white-space:var(--context-menu-item-white-space, nowrap);-webkit-tap-highlight-color:transparent;}.context-menu-item.svelte-1hf60pq:hover {background-color:var(--context-menu-item-hover-background-color, #f5f5f5);color:var(--context-menu-item-hover-color, var(--context-menu-item-color, #333333));}.context-menu-item.svelte-1hf60pq:focus {background-color:var(--context-menu-item-focus-background-color, #f0f0f0);outline:var(--context-menu-item-focus-outline, none);}.context-menu-item-danger.svelte-1hf60pq {color:var(--context-menu-item-danger-color, #dc3545);}.context-menu-item-danger.svelte-1hf60pq:hover {background-color:var(--context-menu-item-danger-hover-background-color, #fff0f0);color:var(\n      --context-menu-item-danger-hover-color,\n      var(--context-menu-item-danger-color, #dc3545)\n    );}.context-menu-item-danger.svelte-1hf60pq:focus {background-color:var(--context-menu-item-danger-focus-background-color, #fff0f0);}.context-menu-item-disabled.svelte-1hf60pq {opacity:var(--context-menu-item-disabled-opacity, 0.4);cursor:var(--context-menu-item-disabled-cursor, not-allowed);pointer-events:none;}.context-menu-separator.svelte-1hf60pq {height:var(--context-menu-separator-height, 1px);background-color:var(--context-menu-separator-color, #e0e0e0);margin:var(--context-menu-separator-margin, 4px 0);}.context-menu-item-icon.svelte-1hf60pq {height:var(--context-menu-item-icon-height, 16px);width:var(--context-menu-item-icon-width, 16px);flex-shrink:0;}.context-menu-item-label.svelte-1hf60pq {flex:1;font-weight:var(--context-menu-item-font-weight, 400);line-height:var(--context-menu-item-line-height, 1.4);}.context-menu-item-shortcut.svelte-1hf60pq {color:var(--context-menu-item-shortcut-color, #999999);font-size:var(--context-menu-item-shortcut-font-size, 12px);font-weight:var(--context-menu-item-shortcut-font-weight, 400);margin-left:var(--context-menu-item-shortcut-margin-left, 16px);}"
 };
 function ContextMenu(e, t) {
-	push(t, !0), append_styles$1(e, $$css$109);
+	push(t, !0), append_styles$1(e, $$css$110);
 	let n = prop(t, "items", 7), i = prop(t, "open", 15, !1), a = prop(t, "maxHeight", 7, "240px"), o = prop(t, "testId", 7), s = prop(t, "children", 7), c = prop(t, "onselect", 7), l = prop(t, "onopen", 7), u = prop(t, "onclose", 7), f = prop(t, "classes", 7), p = /* @__PURE__ */ state(null), h = /* @__PURE__ */ state(null), S = /* @__PURE__ */ state(-1), C = /* @__PURE__ */ state(0), k = /* @__PURE__ */ state(0), R = /* @__PURE__ */ state(null), te = {
 		y: 12,
 		durationTokens: [
@@ -17533,7 +17533,7 @@ function ContextMenu(e, t) {
 		var t = root_4$34();
 		each(t, 21, n, (e) => e.value, (e, t) => {
 			var n = comment(), i = first_child(n), a = (e) => {
-				append(e, root$57());
+				append(e, root$58());
 			}, s = (e) => {
 				var n = root_3$39();
 				let i;
@@ -17587,18 +17587,18 @@ delegate(["keydown", "click"]), create_custom_element(ContextMenu, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/ContextMenu.wc.svelte
-var rest_excludes$52 = new Set([
+var rest_excludes$53 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$108 = {
+]), $$css$109 = {
 	hash: "svelte-wkn0sv",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-context-menu-display, block);}"
 };
 function ContextMenu_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$108);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$52), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$109);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$53), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	ContextMenu(e, spread_props(() => n, () => get(a), {
 		children: (e) => {
 			var n = comment();
@@ -17629,13 +17629,13 @@ customElements.define("sui-context-menu", create_custom_element(ContextMenu_wc,
 }, ["default"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/InputButton/InputButton.svelte
-var root$56 = /* @__PURE__ */ from_html("<span class=\"mandatory-marker svelte-1oc9dju\" aria-hidden=\"true\">*</span>"), root_1$53 = /* @__PURE__ */ from_html("<label class=\"label svelte-1oc9dju\"> <!></label>"), root_2$42 = /* @__PURE__ */ from_html("<div class=\"left-button svelte-1oc9dju\"><!></div>"), root_3$38 = /* @__PURE__ */ from_html("<div class=\"right-button svelte-1oc9dju\"><!></div>"), root_4$33 = /* @__PURE__ */ from_html("<div class=\"bottom-button svelte-1oc9dju\"><!></div>"), root_5$30 = /* @__PURE__ */ from_html("<div role=\"alert\"> </div>"), root_6$27 = /* @__PURE__ */ from_html("<div class=\"info-message svelte-1oc9dju\"> </div>"), root_7$24 = /* @__PURE__ */ from_html("<div><!> <div><div><!> <div class=\"input svelte-1oc9dju\"><!></div> <!></div> <!></div> <!> <!></div>"), $$css$107 = {
+var root$57 = /* @__PURE__ */ from_html("<span class=\"mandatory-marker svelte-1oc9dju\" aria-hidden=\"true\">*</span>"), root_1$53 = /* @__PURE__ */ from_html("<label class=\"label svelte-1oc9dju\"> <!></label>"), root_2$42 = /* @__PURE__ */ from_html("<div class=\"left-button svelte-1oc9dju\"><!></div>"), root_3$38 = /* @__PURE__ */ from_html("<div class=\"right-button svelte-1oc9dju\"><!></div>"), root_4$33 = /* @__PURE__ */ from_html("<div class=\"bottom-button svelte-1oc9dju\"><!></div>"), root_5$30 = /* @__PURE__ */ from_html("<div role=\"alert\"> </div>"), root_6$27 = /* @__PURE__ */ from_html("<div class=\"info-message svelte-1oc9dju\"> </div>"), root_7$24 = /* @__PURE__ */ from_html("<div><!> <div><div><!> <div class=\"input svelte-1oc9dju\"><!></div> <!></div> <!></div> <!> <!></div>"), $$css$108 = {
 	hash: "svelte-1oc9dju",
 	code: ".container.svelte-1oc9dju {display:flex;flex-direction:column;width:var(--input-button-container-width, auto);margin:var(--input-button-container-margin);}.input-button-container.svelte-1oc9dju {--button-width: 100%;--input-border: none;--input-focus-border: none;--input-box-shadow: none;--input-margin: none;--input-width: 100%;font-size:var(--input-font-size, 16px) !important;font-weight:var(--input-button-font-weight, 500);margin:var(--input-button-margin);border-radius:var(--input-button-radius, var(--radius, 4px));border:var(--input-button-container-border);background:var(--input-button-container-background);padding:var(--input-button-container-padding);}.input-button.svelte-1oc9dju {display:flex;align-items:center;border-radius:var(--input-button-radius, var(--radius, 4px));border:var(--input-button-border);box-shadow:var(--input-button-box-shadow, 0px 1px 8px #2f537733);background:var(--input-button-background);}.input-button-container.svelte-1oc9dju:focus-within {border:var(--input-button-focus-border);}.input.svelte-1oc9dju {flex:2;min-width:0px;}.bottom-button.svelte-1oc9dju {padding:var(--input-bottom-btn-padding, 10px 0px);--cursor: var(--bottom-button-cursor);--button-color: var(--bottom-button-color);--button-text-color: var(--bottom-button-text-color);--button-font-family: var(--bottom-button-font-family);--button-font-weight: var(--bottom-button-font-weight);--button-font-size: var(--bottom-button-font-size);--button-height: var(--bottom-button-height, 54px);--button-padding: var(--bottom-button-padding);--button-border-radius: var(--bottom-button-border-radius);--button-width: var(--bottom-button-width);}.label.svelte-1oc9dju {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);line-height:var(--input-label-msg-text-line-height, inherit);margin:var(--input-label-msg-text-margin, 0px 0px 6px 0px);}.invalid.svelte-1oc9dju {outline:var(--invalid-outline, 1px solid var(--input-field-error-stroke, #e11900));}.error-message.svelte-1oc9dju {font-weight:var(--input-error-msg-text-weight, 400);font-size:var(--input-error-msg-text-size, 12px);\n    /* Shares --input-error-msg-text-color with Input.svelte -- kept in sync with its\n       #c5120a default (6.06:1 AA) so the same token means the same color everywhere. */color:var(--input-error-msg-text-color, #c5120a);margin:var(--input-btn-error-msg-margin, 12px 0px 0px 0px);}.info-message.svelte-1oc9dju {font-weight:var(--input-info-msg-text-weight, 400);font-size:var(--input-info-msg-text-size, 12px);\n    /* Shares --input-info-msg-text-color with Input.svelte -- see its .info-message\n       for why this is a neutral #52525b rather than the error red. */color:var(--input-info-msg-text-color, #52525b);margin:var(--input-btn-info-msg-margin, 12px 0px 0px 0px);}.mandatory-marker.svelte-1oc9dju {color:var(--inputbutton-mandatory-color, #e11900);}.size-sm.svelte-1oc9dju {--input-height: var(--inputbutton-sm-height, 36px);--input-padding: var(--inputbutton-sm-padding, 6px 12px);}.size-md.svelte-1oc9dju {--input-height: var(--inputbutton-md-height, 44px);--input-padding: var(--inputbutton-md-padding, 10px 16px);}.size-lg.svelte-1oc9dju {--input-height: var(--inputbutton-lg-height, 54px);--input-padding: var(--inputbutton-lg-padding, 14px 20px);}.external-error-message.svelte-1oc9dju {color:var(--inputbutton-external-error-color, #c5120a);margin:var(--inputbutton-external-error-margin, 6px 0px 0px 0px);}.left-button.svelte-1oc9dju {--button-color: var(--left-button-color);--button-text-color: var(--left-button-text-color);--button-font-family: var(--left-button-font-family);--button-font-weight: var(--left-button-font-weight);--button-font-size: var(--left-button-font-size);--button-height: var(--left-button-height, 54px);--button-padding: var(--left-button-padding);--button-border-radius: var(--left-button-border-radius);--button-width: var(--left-button-width);--cursor: var(--left-button-cursor);--opacity: var(--left-button-opacity);--button-border: var(--left-button-border);display:flex;justify-content:center;align-items:center;flex-direction:row;--button-content-gap: var(--left-button-content-gap);--button-content-flex-direction: var(--left-button-content-flex-direction, row);--button-icon-order: var(--left-button-icon-order);--button-icon-display: var(--left-button-icon-display);--button-text-order: var(--left-button-text-order);--disabled-cursor: var(--left-button-disabled-cursor);--disabled-opacity: var(--left-button-disabled-opacity);}.right-button.svelte-1oc9dju {flex:var(--right-button-flex, 1);display:flex;justify-content:center;align-items:center;flex-direction:row;min-width:var(--right-button-min-width, 0px);--button-color: var(--right-button-color);--button-text-color: var(--right-button-text-color);--button-font-family: var(--right-button-font-family);--button-font-weight: var(--right-button-font-weight);--button-font-size: var(--right-button-font-size);--button-height: var(--right-button-height, 54px);--button-padding: var(--right-button-padding);--button-border-radius: var(\n      --right-button-border-radius,\n      0 var(--radius, 4px) var(--radius, 4px) 0\n    );--button-width: var(--right-button-width, 100%);--cursor: var(--right-button-cursor);--opacity: var(--right-button-opacity);--button-border: var(--right-button-border);--button-content-gap: var(--right-button-content-gap);--button-visibility: var(--right-button-visibility, visible);--button-content-flex-direction: var(--right-button-content-flex-direction, row);--button-icon-order: var(--right-button-icon-order);--button-icon-display: var(--right-button-icon-display);--button-text-order: var(--right-button-text-order);--disabled-cursor: var(--right-button-disabled-cursor);--disabled-opacity: var(--right-button-disabled-opacity);}"
 };
 function InputButton(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$107);
+	push(t, !0), append_styles$1(e, $$css$108);
 	let i = prop(t, "value", 15, ""), a = prop(t, "inputProperties", 7), o = prop(t, "rightButtonProperties", 7), s = prop(t, "leftButtonProperties", 7), c = prop(t, "bottomButtonProperties", 7), l = prop(t, "inputEventProperties", 7), u = prop(t, "rightButtonEventProperties", 7), f = prop(t, "leftButtonEventProperties", 7), p = prop(t, "bottomButtonEventProperties", 7), h = prop(t, "leftIcon", 7), S = prop(t, "rightIcon", 7), C = prop(t, "classes", 7), k = prop(t, "mandatory", 7), R = prop(t, "required", 7), te = prop(t, "size", 7), ne = prop(t, "error", 7), re = prop(t, "testId", 7), G = /* @__PURE__ */ state("InProgress"), be = /* @__PURE__ */ state(null), Me = /* @__PURE__ */ user_derived(() => get(G) === "Valid");
 	function Re(e) {
 		get(G) === "Valid" && u()?.onclick?.(e);
@@ -17767,7 +17767,7 @@ function InputButton(e, t) {
 		}
 	}, mt = root_7$24(), ht = child(mt), gt = (e) => {
 		var t = root_1$53(), n = child(t, !0), i = sibling(n), o = (e) => {
-			append(e, root$56());
+			append(e, root$57());
 		};
 		if_block(i, (e) => {
 			get(ct) && e(o);
@@ -17870,18 +17870,18 @@ delegate(["keyup"]), create_custom_element(InputButton, {
 }, [], ["focus", "blur"], { mode: "open" });
 //#endregion
 //#region src/wc/components/InputButton.wc.svelte
-var rest_excludes$51 = new Set([
+var rest_excludes$52 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$106 = {
+]), $$css$107 = {
 	hash: "svelte-1xxbtx7",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-input-button-display, block);}"
 };
 function InputButton_wc(e, t) {
-	append_styles$1(e, $$css$106);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$51);
+	append_styles$1(e, $$css$107);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$52);
 	InputButton(e, spread_props(() => n, {
 		leftIcon: (e) => {
 			var n = comment();
@@ -17947,12 +17947,12 @@ function resolveLabelHtml(e, t) {
 }
 //#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 = {
+var root$56 = /* @__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$106 = {
 	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\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);
+	push(t, !0), append_styles$1(e, $$css$106);
 	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);
@@ -18182,7 +18182,7 @@ function ListItem(e, t) {
 		}
 	}, Mt = comment(), Nt = first_child(Mt), Pt = (e) => {
 		var t = root_6$26(), s = child(t), Re = (e) => {
-			append(e, root$55());
+			append(e, root$56());
 		};
 		if_block(s, (e) => {
 			C() && e(Re);
@@ -18334,18 +18334,18 @@ delegate(["click", "keydown"]), create_custom_element(ListItem, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/ListItem.wc.svelte
-var rest_excludes$50 = new Set([
+var rest_excludes$51 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$104 = {
+]), $$css$105 = {
 	hash: "svelte-14ff8i4",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-list-item-display, block);}"
 };
 function ListItem_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$104);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$50), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$105);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$51), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	ListItem(e, spread_props(() => n, () => get(a), {
 		leftContent: (e) => {
 			var n = comment(), i = first_child(n), a = (e) => {
@@ -18502,12 +18502,12 @@ function computeMenuDropdownPosition(e) {
 }
 //#endregion
 //#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 = {
+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$104 = {
 	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;}\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);
+	push(t, !0), append_styles$1(e, $$css$104);
 	let n = prop(t, "items", 7), i = prop(t, "open", 15, !1), a = prop(t, "testId", 7), o = prop(t, "trigger", 7), s = prop(t, "interactiveTrigger", 7, !1), c = prop(t, "onselect", 7), l = prop(t, "onopen", 7), u = prop(t, "onclose", 7), f = prop(t, "classes", 7), p = prop(t, "transformSvg", 7), h = prop(t, "selectedValue", 7, null), S = prop(t, "role", 7, "menu"), C = prop(t, "ariaLabel", 7), k = prop(t, "triggerAriaLabel", 7), R = prop(t, "id", 7), te = prop(t, "placement", 7, "bottom-left"), ne = prop(t, "usePortal", 7, !1), re = /* @__PURE__ */ user_derived(() => S() === "listbox" ? "option" : "menuitem"), G = /* @__PURE__ */ state(null), be = /* @__PURE__ */ state(null), Me = /* @__PURE__ */ state(null), Re = /* @__PURE__ */ state(0), Ue = /* @__PURE__ */ state(0), it = /* @__PURE__ */ state(0), at = /* @__PURE__ */ state(-1), ot = /* @__PURE__ */ state(""), ct = /* @__PURE__ */ state(null), lt = /* @__PURE__ */ state("bottom-left"), ut = /* @__PURE__ */ state(!1), dt = 8;
 	function ft() {
 		if (get(G) === null || get(be) === null) return "bottom-left";
@@ -18878,19 +18878,19 @@ delegate(["click", "keydown"]), create_custom_element(Menu, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Menu.wc.svelte
-var rest_excludes$49 = new Set([
+var rest_excludes$50 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"menuAriaLabel"
-]), $$css$102 = {
+]), $$css$103 = {
 	hash: "svelte-nrd3n0",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-menu-display, block);}"
 };
 function Menu_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$102);
-	let n = prop(t, "menuAriaLabel", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$49), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
+	push(t, !0), append_styles$1(e, $$css$103);
+	let n = prop(t, "menuAriaLabel", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$50), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
 	return Menu(e, spread_props(() => i, () => get(o), {
 		get ariaLabel() {
 			return n();
@@ -18960,7 +18960,7 @@ customElements.define("sui-menu", create_custom_element(Menu_wc, {
 }, ["trigger"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Animations/ModalAnimation.svelte
-var root$54 = /* @__PURE__ */ from_html("<div><!></div>");
+var root$55 = /* @__PURE__ */ from_html("<div><!></div>");
 function ModalAnimation(e, t) {
 	push(t, !0);
 	let n = prop(t, "enable", 7, !0), i = prop(t, "align", 7, "bottom"), a = prop(t, "transitionType", 7, "ALL"), o = prop(t, "entryAnimation", 7), s = prop(t, "children", 7), c = prop(t, "testId", 7), l = /* @__PURE__ */ user_derived(() => {
@@ -19074,22 +19074,22 @@ function ModalAnimation(e, t) {
 		}
 	}, te = comment(), ne = first_child(te), re = (e) => {
 		var t = comment(), n = first_child(t), i = (e) => {
-			var t = root$54();
+			var t = root$55();
 			snippet(child(t), () => s() ?? noop), reset(t), template_effect(() => {
 				set_attribute(t, "data-pw", typeof c() == "string" ? c() : null), set_attribute(t, "testid", typeof c() == "string" ? c() : null);
 			}), transition(5, t, () => tokenizedFly, () => get(f)), transition(6, t, () => tokenizedFly, () => get(p)), append(e, t);
 		}, a = (e) => {
-			var t = root$54();
+			var t = root$55();
 			snippet(child(t), () => s() ?? noop), reset(t), template_effect(() => {
 				set_attribute(t, "data-pw", typeof c() == "string" ? c() : null), set_attribute(t, "testid", typeof c() == "string" ? c() : null);
 			}), transition(5, t, () => tokenizedFly, () => get(f)), append(e, t);
 		}, o = (e) => {
-			var t = root$54();
+			var t = root$55();
 			snippet(child(t), () => s() ?? noop), reset(t), template_effect(() => {
 				set_attribute(t, "data-pw", typeof c() == "string" ? c() : null), set_attribute(t, "testid", typeof c() == "string" ? c() : null);
 			}), transition(5, t, () => tokenizedFly, () => get(h)), transition(6, t, () => tokenizedFly, () => get(S)), append(e, t);
 		}, l = (e) => {
-			var t = root$54();
+			var t = root$55();
 			snippet(child(t), () => s() ?? noop), reset(t), template_effect(() => {
 				set_attribute(t, "data-pw", typeof c() == "string" ? c() : null), set_attribute(t, "testid", typeof c() == "string" ? c() : null);
 			}), transition(5, t, () => tokenizedFly, () => get(h)), append(e, t);
@@ -19115,7 +19115,7 @@ create_custom_element(ModalAnimation, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/lib/Animations/OverlayAnimation.svelte
-var root$53 = /* @__PURE__ */ from_html("<div><!></div>");
+var root$54 = /* @__PURE__ */ from_html("<div><!></div>");
 function OverlayAnimation(e, t) {
 	push(t, !0);
 	let n = prop(t, "children", 7), i = prop(t, "testId", 7), a = prop(t, "fadeIn", 7, !1), o = {
@@ -19147,12 +19147,12 @@ function OverlayAnimation(e, t) {
 			a(e), flushSync();
 		}
 	}, l = comment(), u = first_child(l), f = (e) => {
-		var t = root$53();
+		var t = root$54();
 		snippet(child(t), () => n() ?? noop), reset(t), template_effect(() => {
 			set_attribute(t, "data-pw", typeof i() == "string" ? i() : null), set_attribute(t, "testid", typeof i() == "string" ? i() : null);
 		}), transition(5, t, () => tokenizedFly, () => o), transition(2, t, () => tokenizedFly, () => s), append(e, t);
 	}, p = (e) => {
-		var t = root$53();
+		var t = root$54();
 		snippet(child(t), () => n() ?? noop), reset(t), template_effect(() => {
 			set_attribute(t, "data-pw", typeof i() == "string" ? i() : null), set_attribute(t, "testid", typeof i() == "string" ? i() : null);
 		}), transition(2, t, () => tokenizedFly, () => s), append(e, t);
@@ -19168,12 +19168,12 @@ create_custom_element(OverlayAnimation, {
 }, [], [], { mode: "open" });
 //#endregion
 //#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 = {
+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$102 = {
 	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);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);
+	push(t, !0), append_styles$1(e, $$css$102);
 	let n = /* @__PURE__ */ state(null), i = /* @__PURE__ */ state(null), a = /* @__PURE__ */ state(!1), o = null, s = prop(t, "size", 7, "fit-content"), c = prop(t, "align", 7, "center"), l = prop(t, "showOverlay", 7, !0), u = prop(t, "supportHardwareBackPress", 7, !1), f = prop(t, "enableTransition", 7, !0), p = prop(t, "transitionType", 7, "ALL"), h = prop(t, "entryAnimation", 7), S = prop(t, "header", 23, () => ({})), C = prop(t, "footer", 7), k = prop(t, "debounceTime", 7, 700), R = prop(t, "leftImageTestId", 7), te = prop(t, "leftImageAriaLabel", 7), ne = prop(t, "testId", 7), re = prop(t, "content", 7), G = prop(t, "footerSnippet", 7), be = prop(t, "onclose", 7), Me = prop(t, "onheaderrightimageclick", 7), Re = prop(t, "onheaderleftimageclick", 7), Ue = prop(t, "onprimarybuttonclick", 7), it = prop(t, "onsecondarybuttonclick", 7), at = prop(t, "onoverlayclick", 7), ot = prop(t, "onkeydown", 7), ct = prop(t, "ondismiss", 7), lt = prop(t, "classes", 7), ut = prop(t, "overlayBackdropFilter", 7), dt = prop(t, "overlayFadeIn", 7, !1), ft = prop(t, "usePortal", 7, !1), pt = prop(t, "lockScroll", 7, !0), mt = prop(t, "autoDismissAfter", 7, null), ht = prop(t, "ariaLabel", 7), gt = prop(t, "role", 7), _t = prop(t, "overlayAriaLabel", 7), vt = /* @__PURE__ */ user_derived(() => typeof at() == "function" || typeof ct() == "function"), yt = null, bt = createDebouncer(k()), xt = (e) => {
 		let t = e.getRootNode();
 		return t instanceof ShadowRoot ? t : document.body;
@@ -19589,20 +19589,20 @@ delegate(["click", "keydown"]), create_custom_element(Modal, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Modal.wc.svelte
-var rest_excludes$48 = new Set([
+var rest_excludes$49 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"modalAriaLabel",
 	"modalRole"
-]), root$52 = /* @__PURE__ */ from_html("<div class=\"footer-secondary-button\"><!></div>"), root_1$49 = /* @__PURE__ */ from_html("<div class=\"footer-primary-button\"><!></div>"), root_2$38 = /* @__PURE__ */ from_html("<div class=\"footer-action-buttons\"><!> <!></div>"), $$css$100 = {
+]), root$53 = /* @__PURE__ */ from_html("<div class=\"footer-secondary-button\"><!></div>"), root_1$49 = /* @__PURE__ */ from_html("<div class=\"footer-primary-button\"><!></div>"), root_2$38 = /* @__PURE__ */ from_html("<div class=\"footer-action-buttons\"><!> <!></div>"), $$css$101 = {
 	hash: "svelte-1pje8ks",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-modal-display, block);}"
 };
 function Modal_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$100);
-	let n = prop(t, "modalAriaLabel", 7), i = prop(t, "modalRole", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$48), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
+	push(t, !0), append_styles$1(e, $$css$101);
+	let n = prop(t, "modalAriaLabel", 7), i = prop(t, "modalRole", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$49), o = t.$$host, s = /* @__PURE__ */ user_derived(() => dispatchEvents(o, a));
 	return Modal(e, spread_props(() => a, () => get(s), {
 		get ariaLabel() {
 			return n();
@@ -19631,7 +19631,7 @@ function Modal_wc(e, t) {
 				slot(first_child(n), t, "footer", {}, (e) => {
 					var n = comment(), i = first_child(n), a = (e) => {
 						var n = root_2$38(), i = child(n), a = (e) => {
-							var n = root$52();
+							var n = root$53();
 							Button(child(n), spread_props(() => t.footer.secondaryButton, { get onclick() {
 								return get(s).onsecondarybuttonclick;
 							} })), reset(n), append(e, n);
@@ -19774,12 +19774,12 @@ customElements.define("sui-modal", create_custom_element(Modal_wc, {
 }, ["default", "footer"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/assets/signal.svg?raw
-var signal_default = "<svg viewBox=\"0 0 18 12\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"0\" y=\"8\" width=\"3\" height=\"4\" rx=\"0.5\" />\n  <rect x=\"5\" y=\"5\" width=\"3\" height=\"7\" rx=\"0.5\" />\n  <rect x=\"10\" y=\"2\" width=\"3\" height=\"10\" rx=\"0.5\" />\n  <rect x=\"15\" y=\"0\" width=\"3\" height=\"12\" rx=\"0.5\" />\n</svg>\n", wifi_default = "<svg viewBox=\"0 0 16 12\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 2.4C5.6 2.4 3.5 3.4 2 5l1.4 1.4C4.6 5.2 6.2 4.4 8 4.4s3.4.8 4.6 2l1.4-1.4C12.5 3.4 10.4 2.4 8 2.4zM8 6.4c-1.4 0-2.6.6-3.4 1.4L6 9.2c.5-.5 1.2-.8 2-.8s1.5.3 2 .8l1.4-1.4C10.6 7 9.4 6.4 8 6.4zM8 10.4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z\" />\n</svg>\n", battery_default = "<svg viewBox=\"0 0 28 13\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"0\" y=\"0\" width=\"24\" height=\"12\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\" />\n  <rect x=\"2\" y=\"2\" width=\"18\" height=\"8\" rx=\"1\" />\n  <rect x=\"25\" y=\"3.5\" width=\"3\" height=\"5\" rx=\"1\" />\n</svg>\n", root$51 = /* @__PURE__ */ from_html("<div class=\"status-bar svelte-11btwle\"><div class=\"status-bar-left svelte-11btwle\"><span class=\"status-time svelte-11btwle\">9:41</span></div> <div class=\"status-bar-right svelte-11btwle\"><span class=\"status-icon svelte-11btwle\"></span> <span class=\"status-icon svelte-11btwle\"></span> <span class=\"status-icon battery-icon svelte-11btwle\"></span></div></div>"), root_1$48 = /* @__PURE__ */ from_html("<div class=\"notch svelte-11btwle\"></div>"), root_2$37 = /* @__PURE__ */ from_html("<div class=\"home-bar-container svelte-11btwle\"><div class=\"home-bar svelte-11btwle\"></div></div>"), root_3$34 = /* @__PURE__ */ from_html("<div class=\"home-button-container svelte-11btwle\"><div class=\"home-button svelte-11btwle\"></div></div>"), root_4$29 = /* @__PURE__ */ from_html("<div><div class=\"side-buttons-left svelte-11btwle\"><div class=\"side-button volume-up svelte-11btwle\"></div> <div class=\"side-button volume-down svelte-11btwle\"></div></div> <div class=\"side-buttons-right svelte-11btwle\"><div class=\"side-button power svelte-11btwle\"></div></div> <div class=\"phone-frame svelte-11btwle\"><div><!> <!> <div class=\"screen-content svelte-11btwle\"><!></div> <!></div> <!></div></div>"), $$css$99 = {
+var signal_default = "<svg viewBox=\"0 0 18 12\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"0\" y=\"8\" width=\"3\" height=\"4\" rx=\"0.5\" />\n  <rect x=\"5\" y=\"5\" width=\"3\" height=\"7\" rx=\"0.5\" />\n  <rect x=\"10\" y=\"2\" width=\"3\" height=\"10\" rx=\"0.5\" />\n  <rect x=\"15\" y=\"0\" width=\"3\" height=\"12\" rx=\"0.5\" />\n</svg>\n", wifi_default = "<svg viewBox=\"0 0 16 12\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M8 2.4C5.6 2.4 3.5 3.4 2 5l1.4 1.4C4.6 5.2 6.2 4.4 8 4.4s3.4.8 4.6 2l1.4-1.4C12.5 3.4 10.4 2.4 8 2.4zM8 6.4c-1.4 0-2.6.6-3.4 1.4L6 9.2c.5-.5 1.2-.8 2-.8s1.5.3 2 .8l1.4-1.4C10.6 7 9.4 6.4 8 6.4zM8 10.4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z\" />\n</svg>\n", battery_default = "<svg viewBox=\"0 0 28 13\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"0\" y=\"0\" width=\"24\" height=\"12\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1\" fill=\"none\" />\n  <rect x=\"2\" y=\"2\" width=\"18\" height=\"8\" rx=\"1\" />\n  <rect x=\"25\" y=\"3.5\" width=\"3\" height=\"5\" rx=\"1\" />\n</svg>\n", root$52 = /* @__PURE__ */ from_html("<div class=\"status-bar svelte-11btwle\"><div class=\"status-bar-left svelte-11btwle\"><span class=\"status-time svelte-11btwle\">9:41</span></div> <div class=\"status-bar-right svelte-11btwle\"><span class=\"status-icon svelte-11btwle\"></span> <span class=\"status-icon svelte-11btwle\"></span> <span class=\"status-icon battery-icon svelte-11btwle\"></span></div></div>"), root_1$48 = /* @__PURE__ */ from_html("<div class=\"notch svelte-11btwle\"></div>"), root_2$37 = /* @__PURE__ */ from_html("<div class=\"home-bar-container svelte-11btwle\"><div class=\"home-bar svelte-11btwle\"></div></div>"), root_3$34 = /* @__PURE__ */ from_html("<div class=\"home-button-container svelte-11btwle\"><div class=\"home-button svelte-11btwle\"></div></div>"), root_4$29 = /* @__PURE__ */ from_html("<div><div class=\"side-buttons-left svelte-11btwle\"><div class=\"side-button volume-up svelte-11btwle\"></div> <div class=\"side-button volume-down svelte-11btwle\"></div></div> <div class=\"side-buttons-right svelte-11btwle\"><div class=\"side-button power svelte-11btwle\"></div></div> <div class=\"phone-frame svelte-11btwle\"><div><!> <!> <div class=\"screen-content svelte-11btwle\"><!></div> <!></div> <!></div></div>"), $$css$100 = {
 	hash: "svelte-11btwle",
 	code: ".phone-wrapper.svelte-11btwle {display:inline-block;position:relative;transform-origin:top left;transform:scale(var(--phone-scale, 1));rotate:var(--phone-rotation, 0deg);}.phone-frame.svelte-11btwle {position:relative;width:var(--phone-frame-width, 375px);border-radius:var(--phone-frame-border-radius, 50px);padding:var(--phone-frame-padding, 12px);box-sizing:border-box;background:var(--phone-frame-color, black);box-shadow:var(\n      --phone-frame-shadow,\n      0 20px 60px rgba(0, 0, 0, 0.3),\n      0 0 0 1px rgba(0, 0, 0, 0.1)\n    );}.phone-screen.svelte-11btwle {position:relative;border-radius:var(--phone-screen-border-radius, 38px);background:var(--phone-screen-background, #000);\n    /* The screen is black by default, so it owns the ink on it too. Without\n       this, slotted content inherits the surrounding page's colour -- which on\n       a light page is dark text on a black screen (2.04:1). */color:var(--phone-screen-color, #f5f5f5);overflow:hidden;display:flex;flex-direction:column;}.phone-screen.modern.svelte-11btwle {aspect-ratio:var(--phone-screen-aspect-ratio, 9 / 19.5);}.phone-screen.classic.svelte-11btwle {aspect-ratio:var(--phone-screen-aspect-ratio, 9 / 16);}.status-bar.svelte-11btwle {display:flex;justify-content:space-between;align-items:center;height:var(--phone-status-bar-height, 44px);padding:0 24px;color:var(--phone-status-bar-color, #fff);font-size:var(--phone-status-bar-font-size, 14px);background:var(--phone-status-bar-background, transparent);flex-shrink:0;z-index:2;position:relative;}.status-bar-left.svelte-11btwle {display:flex;align-items:center;}.status-time.svelte-11btwle {font-weight:600;letter-spacing:0.5px;}.status-bar-right.svelte-11btwle {display:flex;align-items:center;gap:6px;}.status-icon.svelte-11btwle {display:inline-flex;width:16px;height:12px;color:inherit;}.status-icon.svelte-11btwle svg {width:100%;height:100%;}.battery-icon.svelte-11btwle {width:24px;}.notch.svelte-11btwle {width:var(--phone-notch-width, 120px);height:var(--phone-notch-height, 32px);background:var(--phone-notch-background, var(--phone-frame-color, black));border-radius:var(--phone-notch-border-radius, 20px);position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;}.screen-content.svelte-11btwle {flex:1;overflow:var(--phone-content-overflow, hidden);position:relative;}.home-bar-container.svelte-11btwle {display:flex;justify-content:center;padding:8px 0;flex-shrink:0;}.home-bar.svelte-11btwle {width:var(--phone-home-bar-width, 134px);height:var(--phone-home-bar-height, 5px);background:var(--phone-home-bar-color, #fff);border-radius:var(--phone-home-bar-radius, 3px);}.home-button-container.svelte-11btwle {display:flex;justify-content:center;padding:10px 0;}.home-button.svelte-11btwle {width:var(--phone-home-button-size, 50px);height:var(--phone-home-button-size, 50px);border-radius:50%;border:2px solid var(--phone-home-button-border-color, #555);background:transparent;}.side-buttons-left.svelte-11btwle {position:absolute;top:120px;left:-3px;display:flex;flex-direction:column;gap:12px;z-index:1;}.side-buttons-right.svelte-11btwle {position:absolute;top:140px;right:-3px;z-index:1;}.side-button.svelte-11btwle {background:var(--phone-side-button-color, var(--phone-frame-color, black));border-radius:2px;}.side-button.volume-up.svelte-11btwle,\n  .side-button.volume-down.svelte-11btwle {width:3px;height:30px;}.side-button.power.svelte-11btwle {width:3px;height:40px;}"
 };
 function Phone(e, t) {
-	push(t, !0), append_styles$1(e, $$css$99);
+	push(t, !0), append_styles$1(e, $$css$100);
 	let n = prop(t, "children", 7), i = prop(t, "variant", 7, "modern"), a = prop(t, "showStatusBar", 7, !0), o = prop(t, "showHomeBar", 7, !0), s = prop(t, "testId", 7), c = prop(t, "classes", 7), l = /* @__PURE__ */ user_derived(() => i() === "modern");
 	var u = {
 		get children() {
@@ -19821,7 +19821,7 @@ function Phone(e, t) {
 	}, f = root_4$29(), p = sibling(child(f), 4), h = child(p);
 	let S;
 	var C = child(h), k = (e) => {
-		var t = root$51(), n = sibling(child(t), 2), i = child(n);
+		var t = root$52(), n = sibling(child(t), 2), i = child(n);
 		html(i, () => signal_default, !0), reset(i);
 		var a = sibling(i, 2);
 		html(a, () => wifi_default, !0), reset(a);
@@ -19872,18 +19872,18 @@ create_custom_element(Phone, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Phone.wc.svelte
-var rest_excludes$47 = new Set([
+var rest_excludes$48 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$98 = {
+]), $$css$99 = {
 	hash: "svelte-13fgoav",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-phone-display, block);}"
 };
 function Phone_wc(e, t) {
-	append_styles$1(e, $$css$98);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$47);
+	append_styles$1(e, $$css$99);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$48);
 	Phone(e, spread_props(() => n, {
 		children: (e) => {
 			var n = comment();
@@ -19915,12 +19915,12 @@ customElements.define("sui-phone", create_custom_element(Phone_wc, {
 }, ["default"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Scroller/Scroller.svelte
-var root$50 = /* @__PURE__ */ from_html("<span class=\"arrow-icon svelte-1safnmk\"></span>"), root_1$47 = /* @__PURE__ */ from_html("<div class=\"arrow arrow-prev svelte-1safnmk\"><!></div>"), root_2$36 = /* @__PURE__ */ from_html("<div class=\"gradient gradient-start svelte-1safnmk\"></div>"), root_3$33 = /* @__PURE__ */ from_html("<div class=\"gradient gradient-end svelte-1safnmk\"></div>"), root_4$28 = /* @__PURE__ */ from_html("<div class=\"arrow arrow-next svelte-1safnmk\"><!></div>"), root_5$26 = /* @__PURE__ */ from_html("<div><!> <!> <div role=\"region\" tabindex=\"-1\"><!></div> <!> <!></div>"), $$css$97 = {
+var root$51 = /* @__PURE__ */ from_html("<span class=\"arrow-icon svelte-1safnmk\"></span>"), root_1$47 = /* @__PURE__ */ from_html("<div class=\"arrow arrow-prev svelte-1safnmk\"><!></div>"), root_2$36 = /* @__PURE__ */ from_html("<div class=\"gradient gradient-start svelte-1safnmk\"></div>"), root_3$33 = /* @__PURE__ */ from_html("<div class=\"gradient gradient-end svelte-1safnmk\"></div>"), root_4$28 = /* @__PURE__ */ from_html("<div class=\"arrow arrow-next svelte-1safnmk\"><!></div>"), root_5$26 = /* @__PURE__ */ from_html("<div><!> <!> <div role=\"region\" tabindex=\"-1\"><!></div> <!> <!></div>"), $$css$98 = {
 	hash: "svelte-1safnmk",
 	code: ".scroller.svelte-1safnmk {position:relative;display:flex;width:var(--scroller-width, 100%);height:var(--scroller-height, fit-content);}.scroller.horizontal.svelte-1safnmk {flex-direction:row;align-items:center;}.scroller.vertical.svelte-1safnmk {flex-direction:column;align-items:stretch;}.scroll-container.svelte-1safnmk {flex:1;display:flex;overflow:auto;gap:var(--scroller-gap, 0px);padding:var(--scroller-padding, 0px);}.scroller.horizontal.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {flex-direction:row;overflow-x:auto;overflow-y:hidden;scroll-behavior:var(--scroller-scroll-behavior, smooth);}\n\n  /* The stylesheet half, for scrolls this component does not initiate -- a wheel,\n     a dragged scrollbar, an anchor jump. The script half above covers the three it\n     does initiate, and cannot be replaced by this: an inline style write and a\n     ScrollToOptions value both outrank or bypass every rule here. */\n  @media (prefers-reduced-motion: reduce) {.scroller.horizontal.svelte-1safnmk .scroll-container:where(.svelte-1safnmk),\n    .scroller.vertical.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {scroll-behavior:auto;}\n  }.scroller.vertical.svelte-1safnmk .scroll-container:where(.svelte-1safnmk) {flex-direction:column;overflow-y:auto;overflow-x:hidden;scroll-behavior:var(--scroller-scroll-behavior, smooth);}.scroll-container.snap.svelte-1safnmk {scroll-snap-type:var(--scroller-snap-type, x mandatory);}.scroller.vertical.svelte-1safnmk .scroll-container.snap:where(.svelte-1safnmk) {scroll-snap-type:var(--scroller-snap-type, y mandatory);}.scroll-container.hide-scrollbar.svelte-1safnmk {-ms-overflow-style:none;scrollbar-width:none;}.scroll-container.hide-scrollbar.svelte-1safnmk::-webkit-scrollbar {display:none;}.scroll-container.dragging.svelte-1safnmk {cursor:grabbing;}.arrow.svelte-1safnmk {display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;margin:var(--scroller-arrow-margin, 0px);--button-width: var(--scroller-arrow-size, 32px);--button-height: var(--scroller-arrow-size, 32px);--button-border-radius: var(--scroller-arrow-border-radius, 50%);--button-color: var(--scroller-arrow-background, #ffffff);--button-border: var(--scroller-arrow-border, 1px solid #e0e0e0);--button-text-color: var(--scroller-arrow-color, #333333);--button-padding: var(--scroller-arrow-padding, 4px);--button-box-shadow: var(--scroller-arrow-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.12));--button-hover-color: var(--scroller-arrow-hover-background, #f5f5f5);--button-hover-text-color: var(\n      --scroller-arrow-hover-color,\n      var(--scroller-arrow-color, #333333)\n    );}.arrow-icon.svelte-1safnmk {display:flex;align-items:center;justify-content:center;line-height:0;}.arrow-icon.svelte-1safnmk svg {width:var(--scroller-arrow-icon-size, 16px);height:var(--scroller-arrow-icon-size, 16px);}.gradient.svelte-1safnmk {position:absolute;z-index:1;pointer-events:none;}.scroller.horizontal.svelte-1safnmk .gradient:where(.svelte-1safnmk) {top:0;bottom:0;width:var(--scroller-gradient-size, 80px);}.scroller.horizontal.svelte-1safnmk .gradient-start:where(.svelte-1safnmk) {left:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-start,\n      linear-gradient(\n        to right,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.horizontal.svelte-1safnmk .gradient-end:where(.svelte-1safnmk) {right:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-end,\n      linear-gradient(\n        to left,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.vertical.svelte-1safnmk .gradient:where(.svelte-1safnmk) {left:0;right:0;height:var(--scroller-gradient-size, 80px);}.scroller.vertical.svelte-1safnmk .gradient-start:where(.svelte-1safnmk) {top:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-start,\n      linear-gradient(\n        to bottom,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}.scroller.vertical.svelte-1safnmk .gradient-end:where(.svelte-1safnmk) {bottom:var(--scroller-arrow-size, 32px);background:var(\n      --scroller-gradient-end,\n      linear-gradient(\n        to top,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(255, 255, 255, 0.5) 40%,\n        rgba(255, 255, 255, 0) 100%\n      )\n    );}"
 };
 function Scroller(e, t) {
-	push(t, !0), append_styles$1(e, $$css$97);
+	push(t, !0), append_styles$1(e, $$css$98);
 	let n = prop(t, "children", 7), i = prop(t, "direction", 7, "horizontal"), a = prop(t, "scrollAmount", 7), o = prop(t, "showArrows", 7, !0), s = prop(t, "showGradient", 7, !0), c = prop(t, "dragToScroll", 7, !1), l = prop(t, "snapToItem", 7, !1), u = prop(t, "hideScrollbar", 7, !0), f = prop(t, "hideArrowsOnTouch", 7, !0), p = prop(t, "smoothScroll", 7, !0), h = prop(t, "testId", 7), S = prop(t, "arrowPrevious", 7), C = prop(t, "arrowNext", 7), k = prop(t, "onscrollposition", 7), R = prop(t, "classes", 7), te = /* @__PURE__ */ state(null), ne = /* @__PURE__ */ state(!1), re = /* @__PURE__ */ state(!1), G = /* @__PURE__ */ state(!1), be = /* @__PURE__ */ state(!1), Me = 0, Re = 0, Ue = null;
 	function it(e) {
 		return i() === "horizontal" ? {
@@ -20081,7 +20081,7 @@ function Scroller(e, t) {
 					var t = comment();
 					snippet(first_child(t), S), append(e, t);
 				}, s = (e) => {
-					var t = root$50();
+					var t = root$51();
 					html(t, () => i() === "horizontal" ? chevron_left_default : chevron_up_default, !0), reset(t), append(e, t);
 				};
 				if_block(a, (e) => {
@@ -20120,7 +20120,7 @@ function Scroller(e, t) {
 					var t = comment();
 					snippet(first_child(t), C), append(e, t);
 				}, s = (e) => {
-					var t = root$50();
+					var t = root$51();
 					html(t, () => i() === "horizontal" ? chevron_right_default : chevron_down_default, !0), reset(t), append(e, t);
 				};
 				if_block(a, (e) => {
@@ -20164,18 +20164,18 @@ delegate(["mousedown"]), create_custom_element(Scroller, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Scroller.wc.svelte
-var rest_excludes$46 = new Set([
+var rest_excludes$47 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), root$49 = /* @__PURE__ */ from_html("<span class=\"arrow-icon\"></span>"), $$css$96 = {
+]), root$50 = /* @__PURE__ */ from_html("<span class=\"arrow-icon\"></span>"), $$css$97 = {
 	hash: "svelte-8xl2gl",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-scroller-display, block);}"
 };
 function Scroller_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$96);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$46), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$97);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$47), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Scroller(e, spread_props(() => n, () => get(a), {
 		children: (e) => {
 			var n = comment();
@@ -20184,14 +20184,14 @@ function Scroller_wc(e, t) {
 		arrowPrevious: (e) => {
 			var n = comment();
 			slot(first_child(n), t, "arrow-previous", {}, (e) => {
-				var n = root$49();
+				var n = root$50();
 				html(n, () => t.direction === "horizontal" ? chevron_left_default : chevron_up_default, !0), reset(n), append(e, n);
 			}), append(e, n);
 		},
 		arrowNext: (e) => {
 			var n = comment();
 			slot(first_child(n), t, "arrow-next", {}, (e) => {
-				var n = root$49();
+				var n = root$50();
 				html(n, () => t.direction === "horizontal" ? chevron_right_default : chevron_down_default, !0), reset(n), append(e, n);
 			}), append(e, n);
 		},
@@ -20277,13 +20277,13 @@ 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$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 = {
+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$96 = {
 	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(\n      --select-trigger-transition,\n      border-color\n        var(\n          --select-trigger-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--select-trigger-transition-easing, var(--motion-easing, ease)),\n      box-shadow\n        var(\n          --select-trigger-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--select-trigger-transition-easing, var(--motion-easing, ease))\n    );}.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\n      var(--select-arrow-transition-duration, var(--duration-quick, 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(\n          --select-option-indicator-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\n        var(--select-option-indicator-transition-easing, var(--motion-easing, ease)),\n      border-color\n        var(\n          --select-option-indicator-transition-duration,\n          var(--duration-quick, var(--motion-duration, 0.15s))\n        )\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  }"
 };
 function Select(e, t) {
 	let n = props_id();
-	push(t, !0), append_styles$1(e, $$css$95);
+	push(t, !0), append_styles$1(e, $$css$96);
 	let i = prop(t, "items", 7), a = prop(t, "value", 31, () => proxy([])), o = prop(t, "multiple", 7, !1), s = prop(t, "searchable", 7, !1), c = prop(t, "searchPosition", 7, "trigger"), l = prop(t, "placeholder", 7, ""), u = prop(t, "disabled", 7, !1), f = prop(t, "error", 7, !1), p = prop(t, "errorMessage", 7), h = prop(t, "clearable", 7, !1), S = prop(t, "onclear", 7), C = prop(t, "bottomContent", 7), k = prop(t, "optionIndicator", 7), R = prop(t, "showSelectAll", 7, !1), te = prop(t, "selectAllLabel", 7, "Select all"), ne = prop(t, "showSelectedTick", 7, !1), re = prop(t, "triggerSummary", 7), G = prop(t, "testId", 7), be = prop(t, "itemTestId", 7), Me = prop(t, "onchange", 7), Re = prop(t, "onopen", 7), Ue = prop(t, "onclose", 7), it = prop(t, "classes", 7), at = prop(t, "open", 15, !1), ot = prop(t, "dropdownAlign", 7, "left"), ct = prop(t, "placement", 7), lt = prop(t, "hierarchy", 7, "default"), ut = prop(t, "leftIcon", 7), dt = prop(t, "leftIconTestId", 7), ft = prop(t, "usePortal", 7, !1), pt = prop(t, "name", 7);
 	function mt(e) {
 		return e.map((e) => typeof e == "string" ? {
@@ -21079,18 +21079,18 @@ delegate([
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Select.wc.svelte
-var rest_excludes$45 = new Set([
+var rest_excludes$46 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$94 = {
+]), $$css$95 = {
 	hash: "svelte-13fxncr",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-select-display, block);}"
 };
 function Select_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$94);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$45), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$95);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$46), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Select(e, spread_props(() => n, () => get(a), {
 		bottomContent: (e) => {
 			var n = comment();
@@ -21202,12 +21202,12 @@ customElements.define("sui-select", create_custom_element(Select_wc, {
 })));
 //#endregion
 //#region src/lib/Sheet/Sheet.svelte
-var root$48 = /* @__PURE__ */ from_html("<span class=\"sheet-title svelte-1dln6bq\"> </span>"), root_1$45 = /* @__PURE__ */ from_html("<div class=\"sheet-close-button svelte-1dln6bq\"><!></div>"), root_2$34 = /* @__PURE__ */ from_html("<div class=\"sheet-header svelte-1dln6bq\"><!> <!></div>"), root_3$31 = /* @__PURE__ */ from_html("<div class=\"sheet-footer svelte-1dln6bq\"><!></div>"), root_4$26 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"><div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"sheet-content svelte-1dln6bq\"><!></div> <!></div></div>"), $$css$93 = {
+var root$49 = /* @__PURE__ */ from_html("<span class=\"sheet-title svelte-1dln6bq\"> </span>"), root_1$45 = /* @__PURE__ */ from_html("<div class=\"sheet-close-button svelte-1dln6bq\"><!></div>"), root_2$34 = /* @__PURE__ */ from_html("<div class=\"sheet-header svelte-1dln6bq\"><!> <!></div>"), root_3$31 = /* @__PURE__ */ from_html("<div class=\"sheet-footer svelte-1dln6bq\"><!></div>"), root_4$26 = /* @__PURE__ */ from_html("<div tabindex=\"-1\"><div role=\"dialog\" aria-modal=\"true\" tabindex=\"-1\"><!> <div class=\"sheet-content svelte-1dln6bq\"><!></div> <!></div></div>"), $$css$94 = {
 	hash: "svelte-1dln6bq",
 	code: ".sheet-overlay.svelte-1dln6bq {position:fixed;top:0;left:0;right:0;bottom:0;z-index:var(--sheet-overlay-z-index, 15);-webkit-tap-highlight-color:transparent;}.overlay-visible.svelte-1dln6bq {background-color:var(--sheet-overlay-background, #00000066);}.overlay-invisible.svelte-1dln6bq {background-color:transparent;}.overlay-interactive.svelte-1dln6bq {pointer-events:auto;}.overlay-noninteractive.svelte-1dln6bq {pointer-events:none;}.sheet-panel.svelte-1dln6bq {position:fixed;display:flex;flex-direction:column;background-color:var(--sheet-background, #ffffff);box-shadow:var(--sheet-box-shadow, -2px 0 8px rgba(0, 0, 0, 0.15));z-index:var(--sheet-z-index, 16);pointer-events:auto;outline:none;}\n\n  /* The panel itself is the initial focus target on open (scrollLockAction\n     focuses it directly, and it's the Tab-trap's own boundary), so removing\n     its outline unconditionally left a keyboard user with no visible sign\n     focus had moved into the sheet at all -- particularly visible on the\n     \"Raw\" variant, which has no focusable child for focus to land on\n     instead. :focus-visible restores a ring precisely when the browser\n     judges it's from keyboard/programmatic focus rather than a mouse click,\n     so clicking the trigger still shows nothing new. outline-offset is\n     negative (inset) rather than the usual positive offset other components\n     in this library use, because left/right/top/bottom panels sit flush\n     against a viewport edge -- a positive offset would clip there. */.sheet-panel.svelte-1dln6bq:focus-visible {outline:var(--sheet-panel-focus-outline, 2px solid #2563eb);outline-offset:var(--sheet-panel-focus-outline-offset, -2px);}\n\n  /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded\n     edge-to-edge values below, so an unconfigured Sheet renders unchanged.\n     Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:\n     auto to size to content) turns the panel from an edge-to-edge slide-in into\n     an anchored floating panel, without needing a different component. */.sheet-panel.left.svelte-1dln6bq,\n  .sheet-panel.right.svelte-1dln6bq {top:var(--sheet-top, 0);bottom:var(--sheet-bottom, 0);width:var(--sheet-width, 400px);max-width:var(--sheet-max-width, 100vw);}.sheet-panel.left.svelte-1dln6bq {left:var(--sheet-left, 0);border-right:var(--sheet-border, none);}.sheet-panel.right.svelte-1dln6bq {right:var(--sheet-right, 0);border-left:var(--sheet-border, none);}\n\n  /* Top/bottom stretch edge to edge by default, exactly as before: --sheet-\n     band-width is `auto`, so `margin-inline: auto` has nothing to distribute\n     and the panel still spans --sheet-left to --sheet-right.\n\n     Setting --sheet-band-width (or --sheet-band-max-width) caps it, and the\n     auto margins then centre it between those same two insets -- which is the\n     shape a bottom \"launch\" sheet wants above phone widths, and previously\n     had to be faked with hand-computed calc() offsets.\n\n     Deliberately NOT --sheet-width/--sheet-max-width, even though the issue\n     proposed those names. Those already mean \"the width of a left/right\n     panel\", so a consumer who themes them for their side sheets would find\n     their bottom sheets silently reshaped by an upgrade. side=\"center\" avoids\n     the same collision the same way, with its own --sheet-center-* tokens. */.sheet-panel.top.svelte-1dln6bq,\n  .sheet-panel.bottom.svelte-1dln6bq {left:var(--sheet-left, 0);right:var(--sheet-right, 0);height:var(--sheet-height, 300px);max-height:var(--sheet-max-height, 100vh);width:var(--sheet-band-width, auto);max-width:var(--sheet-band-max-width, none);box-sizing:var(--sheet-band-box-sizing, content-box);margin-inline:auto;border:var(--sheet-band-border, none);}\n\n  /* A capped panel is a floating card and needs all four edges; an\n     edge-to-edge one deliberately draws only the edge it enters from. The\n     entering edge falls back through --sheet-border so an existing theme that\n     sets only that keeps rendering exactly as it did. */.sheet-panel.top.svelte-1dln6bq {top:var(--sheet-top, 0);border-bottom:var(--sheet-band-border, var(--sheet-border, none));}.sheet-panel.bottom.svelte-1dln6bq {bottom:var(--sheet-bottom, 0);border-top:var(--sheet-band-border, var(--sheet-border, none));}\n\n  /* `side=\"center\"` is a fixed-size floating dialog, not an edge-anchored\n     panel: no top/bottom/left/right offset, sized by its own tokens rather\n     than --sheet-width/--sheet-height (so an existing left/right/top/bottom\n     theme is untouched by adding this variant), and centered with a\n     transform instead of stretching to an edge. */.sheet-panel.center.svelte-1dln6bq {top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sheet-center-width, 480px);max-width:var(--sheet-center-max-width, calc(100vw - 32px));max-height:var(--sheet-center-max-height, 90vh);}.sheet-header.svelte-1dln6bq {display:flex;align-items:center;padding:var(--sheet-header-padding, 16px 20px);background-color:var(--sheet-header-background, inherit);border-bottom:var(--sheet-header-border-bottom, 1px solid #e0e0e0);flex-shrink:0;}.sheet-title.svelte-1dln6bq {flex:1;font-size:var(--sheet-title-font-size, 18px);font-weight:var(--sheet-title-font-weight, 600);font-family:var(--sheet-title-font-family, inherit);color:var(--sheet-title-color, #1a1a1a);line-height:var(--sheet-title-line-height, 1.4);}.sheet-close-button.svelte-1dln6bq {--button-width: var(--sheet-close-button-size, 32px);--button-height: var(--sheet-close-button-size, 32px);--button-border: none;--button-border-radius: var(--sheet-close-button-border-radius, var(--radius, 4px));--button-color: var(--sheet-close-button-background, transparent);--button-text-color: var(--sheet-close-button-color, #666666);--button-font-size: var(--sheet-close-button-font-size, 16px);--button-padding: 0;--button-hover-color: var(--sheet-close-button-hover-background, #f0f0f0);flex-shrink:0;display:flex;align-items:center;justify-content:center;}.sheet-content.svelte-1dln6bq {flex:1;overflow-y:var(--sheet-content-overflow-y, auto);padding:var(--sheet-content-padding, 20px);scrollbar-width:var(--sheet-scrollbar-width, none);}.sheet-content.svelte-1dln6bq::-webkit-scrollbar {display:none;}.sheet-footer.svelte-1dln6bq {padding:var(--sheet-footer-padding, 16px 20px);background-color:var(--sheet-footer-background, inherit);border-top:var(--sheet-footer-border-top, 1px solid #e0e0e0);flex-shrink:0;}"
 };
 function Sheet(e, t) {
-	push(t, !0), append_styles$1(e, $$css$93);
+	push(t, !0), append_styles$1(e, $$css$94);
 	let n = prop(t, "open", 15, !1), i = prop(t, "side", 7, "right"), a = prop(t, "title", 7), o = prop(t, "showOverlay", 7, !0), s = prop(t, "dismissOnOutsideClick", 23, o), c = prop(t, "overlayAriaLabel", 7), l = prop(t, "showCloseButton", 7, !0), u = prop(t, "headingLevel", 7), f = prop(t, "testId", 7), p = prop(t, "content", 7), h = prop(t, "footer", 7), S = prop(t, "onclose", 7), C = prop(t, "onafteropen", 7), k = prop(t, "onafterclose", 7), R = prop(t, "classes", 7), te = /* @__PURE__ */ state(null), ne = /* @__PURE__ */ state(null), re = /* @__PURE__ */ user_derived(() => {
 		if (reducedMotion.current) return {
 			x: 0,
@@ -21398,7 +21398,7 @@ function Sheet(e, t) {
 						template_effect(() => set_text(n, a())), append(t, n);
 					}), append(e, t);
 				}, o = (e) => {
-					var t = root$48(), n = child(t, !0);
+					var t = root$49(), n = child(t, !0);
 					reset(t), template_effect(() => set_text(n, a())), append(e, t);
 				};
 				if_block(n, (e) => {
@@ -21462,19 +21462,19 @@ delegate(["click", "keydown"]), create_custom_element(Sheet, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Sheet.wc.svelte
-var rest_excludes$44 = new Set([
+var rest_excludes$45 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host",
 	"sheetTitle"
-]), $$css$92 = {
+]), $$css$93 = {
 	hash: "svelte-1ufodhq",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-sheet-display, block);}"
 };
 function Sheet_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$92);
-	let n = prop(t, "sheetTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$44), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
+	push(t, !0), append_styles$1(e, $$css$93);
+	let n = prop(t, "sheetTitle", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$45), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
 	return Sheet(e, spread_props(() => i, () => get(o), {
 		get title() {
 			return n();
@@ -21615,12 +21615,12 @@ function createCopyState(e = {}) {
 }
 //#endregion
 //#region src/lib/Snippet/Snippet.svelte
-var root$47 = /* @__PURE__ */ from_html("<span class=\"snippet-copied svelte-ql5iye\"> </span>"), root_1$44 = /* @__PURE__ */ from_html("<span class=\"snippet-copy-icon svelte-ql5iye\"></span>"), root_2$33 = /* @__PURE__ */ from_html("<div class=\"snippet-copy svelte-ql5iye\"><!></div> <span class=\"snippet-status svelte-ql5iye\" role=\"status\" aria-live=\"polite\"> </span>", 1), root_3$30 = /* @__PURE__ */ from_html("<div><code class=\"snippet-code svelte-ql5iye\"><span class=\"snippet-prompt svelte-ql5iye\"> </span> <span class=\"snippet-text svelte-ql5iye\"> </span></code> <!></div>"), $$css$91 = {
+var root$48 = /* @__PURE__ */ from_html("<span class=\"snippet-copied svelte-ql5iye\"> </span>"), root_1$44 = /* @__PURE__ */ from_html("<span class=\"snippet-copy-icon svelte-ql5iye\"></span>"), root_2$33 = /* @__PURE__ */ from_html("<div class=\"snippet-copy svelte-ql5iye\"><!></div> <span class=\"snippet-status svelte-ql5iye\" role=\"status\" aria-live=\"polite\"> </span>", 1), root_3$30 = /* @__PURE__ */ from_html("<div><code class=\"snippet-code svelte-ql5iye\"><span class=\"snippet-prompt svelte-ql5iye\"> </span> <span class=\"snippet-text svelte-ql5iye\"> </span></code> <!></div>"), $$css$92 = {
 	hash: "svelte-ql5iye",
 	code: ".snippet.svelte-ql5iye {display:flex;align-items:center;justify-content:space-between;gap:var(--snippet-gap, 8px);background:var(--snippet-background, #1e1e1e);border:var(--snippet-border, 1px solid #333);border-radius:var(--snippet-border-radius, var(--radius, 4px));padding:var(--snippet-padding, 12px 16px);font-family:var(--snippet-font-family, monospace);font-size:var(--snippet-font-size, 14px);color:var(--snippet-color, #e0e0e0);margin:var(--snippet-margin, 0);}.snippet-code.svelte-ql5iye {display:flex;align-items:center;overflow:hidden;flex:1;min-width:0;}.snippet-prompt.svelte-ql5iye {color:var(--snippet-prompt-color, #888);margin-right:var(--snippet-prompt-margin-right, 8px);flex-shrink:0;}.snippet-text.svelte-ql5iye {color:var(--snippet-text-color, #e0e0e0);font-family:var(--snippet-text-font-family, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.snippet-copy.svelte-ql5iye {--button-color: var(--snippet-copy-background, transparent);--button-text-color: var(--snippet-copy-color, #888);--button-border: var(--snippet-copy-border, none);--button-padding: var(--snippet-copy-padding, 4px);--button-border-radius: var(--snippet-copy-border-radius, var(--radius, 4px));--cursor: var(--snippet-copy-cursor, pointer);--button-hover-color: var(--snippet-copy-hover-background, #333);\n    /* Ghost brings its own hover label; keep this button's. */--button-hover-text-color: var(--button-text-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;}.snippet-copy-icon.svelte-ql5iye {display:inline-flex;align-items:center;justify-content:center;width:var(--snippet-copy-size, 16px);height:var(--snippet-copy-size, 16px);}.snippet-copy-icon.svelte-ql5iye svg {width:100%;height:100%;}\n\n  /* Announced, never shown: the visible \"Copied!\" is the label inside the\n     button, and repeating it on screen would read as a duplicate. */.snippet-status.svelte-ql5iye {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}.snippet-copied.svelte-ql5iye {color:var(--snippet-copied-color, #4caf50);font-size:var(--snippet-copied-font-size, 12px);font-family:var(--snippet-font-family, monospace);}"
 };
 function Snippet(e, t) {
-	push(t, !0), append_styles$1(e, $$css$91);
+	push(t, !0), append_styles$1(e, $$css$92);
 	let n = prop(t, "text", 7), i = prop(t, "prompt", 7, "$"), a = prop(t, "showCopyButton", 7, !0), o = prop(t, "testId", 7), s = prop(t, "copyIcon", 7), c = prop(t, "copiedLabel", 7, "Copied!"), l = prop(t, "copyResetMs", 7, 2e3), u = prop(t, "oncopy", 7), f = prop(t, "onerror", 7), p = prop(t, "classes", 7), h = createCopyState({
 		get copyResetMs() {
 			return l();
@@ -21709,7 +21709,7 @@ function Snippet(e, t) {
 		}, () => h.copied ? {} : { ariaLabel: "Copy to clipboard" }, {
 			children: (e, t) => {
 				var n = comment(), i = first_child(n), a = (e) => {
-					var t = root$47(), n = child(t, !0);
+					var t = root$48(), n = child(t, !0);
 					reset(t), template_effect(() => set_text(n, c())), append(e, t);
 				}, o = (e) => {
 					var t = comment();
@@ -21747,18 +21747,18 @@ create_custom_element(Snippet, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Snippet.wc.svelte
-var rest_excludes$43 = new Set([
+var rest_excludes$44 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$90 = {
+]), $$css$91 = {
 	hash: "svelte-18nkb5w",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-snippet-display, block);}"
 };
 function Snippet_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$90);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$43), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$91);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$44), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Snippet(e, spread_props(() => n, () => get(a), {
 		copyIcon: (e) => {
 			var n = comment();
@@ -21802,12 +21802,12 @@ customElements.define("sui-snippet", create_custom_element(Snippet_wc, {
 }, ["copy-icon"], [], { mode: "open" }));
 //#endregion
 //#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 = {
+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$47 = /* @__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$90 = {
 	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;\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);
+	push(t, !0), append_styles$1(e, $$css$90);
 	let n = prop(t, "text", 7), i = prop(t, "items", 7), a = prop(t, "disabled", 7, !1), o = prop(t, "testId", 7), s = prop(t, "dropdownIcon", 7), c = prop(t, "classes", 7), l = prop(t, "triggerAriaLabel", 7), u = prop(t, "onclick", 7), f = prop(t, "onselect", 7), p = /* @__PURE__ */ state(!1), h = /* @__PURE__ */ user_derived(() => typeof l() == "string" && l().trim() !== "" ? l() : n().length > 0 ? `More ${n()} options` : "More options");
 	function S(e) {
 		a() || u()?.(e);
@@ -21898,7 +21898,7 @@ function SplitButton(e, t) {
 			set(p, e, !0);
 		},
 		trigger: (e) => {
-			var t = root$46(), n = child(t), i = (e) => {
+			var t = root$47(), n = child(t), i = (e) => {
 				var t = comment();
 				snippet(first_child(t), s), append(e, t);
 			}, a = (e) => {
@@ -21927,18 +21927,18 @@ create_custom_element(SplitButton, {
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/SplitButton.wc.svelte
-var rest_excludes$42 = new Set([
+var rest_excludes$43 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), $$css$88 = {
+]), $$css$89 = {
 	hash: "svelte-1c4rjo7",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-split-button-display, block);}"
 };
 function SplitButton_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$88);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$42), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$89);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$43), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	SplitButton(e, spread_props(() => n, () => get(a), {
 		dropdownIcon: (e) => {
 			var n = comment();
@@ -22101,12 +22101,12 @@ 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$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 = {
+}, 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$46 = /* @__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$88 = {
 	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;}"
 };
 function BuiltinCell(e, t) {
-	push(t, !0), append_styles$1(e, $$css$87);
+	push(t, !0), append_styles$1(e, $$css$88);
 	let n = prop(t, "column", 7), i = prop(t, "value", 7), a = prop(t, "rowIndex", 7), o = prop(t, "originalIndex", 7), s = prop(t, "usePortal", 7, !1), c = /* @__PURE__ */ user_derived(() => n().align === "right" ? "builtin-align-end" : n().align === "center" ? "builtin-align-center" : ""), l = {
 		icon: "icon",
 		thumbnail: "thumb",
@@ -22202,7 +22202,7 @@ function BuiltinCell(e, t) {
 		}), append(e, n);
 	}, re = (e) => {
 		let t = /* @__PURE__ */ user_derived(() => asJsonObject(i()) ?? {}), n = /* @__PURE__ */ user_derived(() => asTagCellData(get(t).tag ?? null));
-		var a = root$45(), o = child(a), s = child(o, !0);
+		var a = root$46(), o = child(a), s = child(o, !0);
 		reset(o);
 		var l = sibling(o, 2), u = (e) => {
 			{
@@ -22837,12 +22837,12 @@ 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$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 = {
+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$45 = /* @__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$87 = {
 	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\n      var(\n        --table-scroll-scrim-transition-duration,\n        var(--duration-base, var(--motion-duration, 0.2s))\n      )\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(\n      --table-checkbox-transition,\n      var(--duration-quick, var(--motion-duration, 0.15s))\n    );}\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  }"
 };
 function Table(e, t) {
-	push(t, !0), append_styles$1(e, $$css$86);
+	push(t, !0), append_styles$1(e, $$css$87);
 	let n = prop(t, "tableTitle", 7, ""), i = prop(t, "tableHeaders", 23, () => []), a = prop(t, "tableData", 23, () => []), o = prop(t, "columns", 7), s = prop(t, "rows", 7), c = prop(t, "sortable", 7, !0), l = prop(t, "sortableColumns", 7), u = prop(t, "sortMode", 7, "client"), f = prop(t, "sortState", 7), p = prop(t, "stickyHeader", 7, !1), h = prop(t, "isTableScrollable", 7, !1), S = prop(t, "isContentScrollable", 7, !1), C = prop(t, "testId", 7), k = prop(t, "caption", 7), R = prop(t, "sortAscIcon", 7), te = prop(t, "sortDescIcon", 7), ne = prop(t, "sortDefaultIcon", 7), re = prop(t, "cell", 7), G = prop(t, "empty", 7), be = prop(t, "onrowclick", 7), Me = prop(t, "onsort", 7), Re = prop(t, "onsortchange", 7), Ue = prop(t, "classes", 7), it = prop(t, "paginatorSlot", 7), at = prop(t, "getRowTestId", 7), ot = prop(t, "getCellTestId", 7), ct = prop(t, "checkboxSelection", 7), lt = prop(t, "searchConfig", 7), ut = prop(t, "onsearchchange", 7), dt = prop(t, "pagination", 7), ft = prop(t, "toolbarSlot", 7), pt = prop(t, "rowNumberColumn", 7, !1), mt = prop(t, "rowNumberLabel", 7, "#"), ht = prop(t, "summaryRowIndex", 7, null), gt = prop(t, "headerTooltipIcon", 7), _t = prop(t, "headerTooltipPosition", 7), vt = prop(t, "usePortal", 7, !1), yt = prop(t, "mobileCardLayout", 7, !1), bt = prop(t, "labels", 7), xt = /* @__PURE__ */ user_derived(() => o() ? normalizeColumns(o(), s() ?? []) : null), St = /* @__PURE__ */ user_derived(() => get(xt) ? get(xt).tableHeaders : i()), Ct = /* @__PURE__ */ user_derived(() => get(xt) ? get(xt).tableData : a()), wt = /* @__PURE__ */ user_derived(() => new Map(get(Ct).map((e, t) => [e, t]))), Tt = /* @__PURE__ */ user_derived(() => get(xt) ? get(xt).sortableColumns : l()), Et = /* @__PURE__ */ user_derived(() => !get(xt) || !s() ? null : new Map(get(xt).tableData.map((e, t) => [e, s()[t]]))), Dt = /* @__PURE__ */ state(null), Ot = /* @__PURE__ */ state("asc"), kt = (e) => o()?.[e]?.id ?? String(e), At = /* @__PURE__ */ user_derived(() => f() !== void 0), jt = /* @__PURE__ */ user_derived(() => get(At) ? f()?.columnId ?? null : get(Dt)), Mt = /* @__PURE__ */ user_derived(() => get(At) ? f()?.direction ?? "asc" : get(Ot)), Nt = /* @__PURE__ */ user_derived(() => {
 		if (get(jt) === null) return null;
 		let e = get(St).findIndex((e, t) => kt(t) === get(jt));
@@ -23212,7 +23212,7 @@ function Table(e, t) {
 			bt(e), flushSync();
 		}
 	}, nr = root_33(), rr = first_child(nr), ir = (e) => {
-		var t = root$44(), i = child(t, !0);
+		var t = root$45(), i = child(t, !0);
 		reset(t), template_effect(() => set_text(i, n())), append(e, t);
 	};
 	if_block(rr, (e) => {
@@ -23811,18 +23811,18 @@ delegate([
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Table.wc.svelte
-var rest_excludes$41 = new Set([
+var rest_excludes$42 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"$$host"
-]), root$43 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-asc\"></span>"), root_1$40 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-desc\"></span>"), $$css$85 = {
+]), root$44 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-asc\"></span>"), root_1$40 = /* @__PURE__ */ from_html("<span class=\"sort-icon sort-icon-desc\"></span>"), $$css$86 = {
 	hash: "svelte-fa1e8b",
 	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. The value\n     matches this component's own root element (block-level), and is a token so a\n     consumer can change it without reaching inside the shadow root -- which they\n     could not do, since a stylesheet cannot add a rule there. */:host {display:var(--sui-table-display, block);}"
 };
 function Table_wc(e, t) {
-	push(t, !0), append_styles$1(e, $$css$85);
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$41), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
+	push(t, !0), append_styles$1(e, $$css$86);
+	let n = /* @__PURE__ */ rest_props(t, rest_excludes$42), i = t.$$host, a = /* @__PURE__ */ user_derived(() => dispatchEvents(i, n));
 	Table(e, spread_props(() => n, () => get(a), {
 		empty: (e, n = noop) => {
 			var i = comment(), a = first_child(i), o = (e) => {
@@ -23839,7 +23839,7 @@ function Table_wc(e, t) {
 		sortAscIcon: (e) => {
 			var n = comment();
 			slot(first_child(n), t, "sort-asc-icon", {}, (e) => {
-				var t = root$43();
+				var t = root$44();
 				html(t, () => sort_default_default, !0), reset(t), append(e, t);
 			}), append(e, n);
 		},
@@ -23970,6 +23970,608 @@ customElements.define("sui-table", create_custom_element(Table_wc, {
 	"toolbar-slot"
 ], [], { mode: "open" }));
 //#endregion
+//#region src/lib/ThinkingOrb/orb/space.ts
+var clamp01$5 = (e) => Math.max(0, Math.min(1, e)), rotateX = (e, t) => {
+	let n = Math.cos(t), i = Math.sin(t);
+	return {
+		x: e.x,
+		y: e.y * n - e.z * i,
+		z: e.y * i + e.z * n
+	};
+}, rotateY = (e, t) => {
+	let n = Math.cos(t), i = Math.sin(t);
+	return {
+		x: e.x * n + e.z * i,
+		y: e.y,
+		z: e.z * n - e.x * i
+	};
+}, rotateZ = (e, t) => {
+	let n = Math.cos(t), i = Math.sin(t);
+	return {
+		x: e.x * n - e.y * i,
+		y: e.x * i + e.y * n,
+		z: e.z
+	};
+}, FOCAL_LENGTH_PX = 320, project = (e, t, n) => {
+	let i = n > 0 ? n : 1, a = FOCAL_LENGTH_PX / (FOCAL_LENGTH_PX + e.z);
+	return {
+		x: t + e.x * a,
+		y: t + e.y * a,
+		depth: clamp01$5((i - e.z) / (i * 2)),
+		scale: a
+	};
+}, GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5)), sampleSphere = (e, t, n) => {
+	let i = t > 0 ? Math.floor(t) : 1, a = (Math.floor(e) % i + i) % i, o = 1 - (2 * a + 1) / i, s = Math.sqrt(Math.max(0, 1 - o * o)), c = a * GOLDEN_ANGLE;
+	return {
+		x: Math.cos(c) * s * n,
+		y: o * n,
+		z: Math.sin(c) * s * n
+	};
+}, easeInOutCubic = (e) => {
+	let t = clamp01$5(e);
+	return t < .5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+}, easeOutCubic = (e) => 1 - (1 - clamp01$5(e)) ** 3, hashUnit = (e) => {
+	let t = (e | 0) >>> 0;
+	return t = Math.imul(t ^ t >>> 16, 73244475), t = Math.imul(t ^ t >>> 16, 73244475), t = (t ^ t >>> 16) >>> 0, t / 4294967296;
+}, REFERENCE_SIZE = 64, RADIUS_GROWTH_EXPONENT = .6, MIN_DOT_RADIUS_PX = .6, modeSizing = (e, t, n) => {
+	let i = e / REFERENCE_SIZE, a = i * i, o = t > 0 ? t : .1, s = n > 0 ? n : .1;
+	return {
+		count: (e) => Math.max(1, Math.round(e * a * o)),
+		radius: (e) => Math.max(MIN_DOT_RADIUS_PX, e * i ** RADIUS_GROWTH_EXPONENT * s)
+	};
+}, GRAVITY_DEFAULTS = {
+	radius: 32,
+	strength: 6
+}, clamp01$4 = (e) => Math.max(0, Math.min(1, e)), attractPoint = (e, t, n) => {
+	let i = t.x - e.x, a = t.y - e.y, o = Math.hypot(i, a);
+	if (o === 0 || o >= n.radius) return e;
+	let s = clamp01$4(1 - o / n.radius), c = Math.min(easeOutCubic(s) * n.strength, o) / o;
+	return {
+		x: e.x + i * c,
+		y: e.y + a * c
+	};
+}, attractDot = (e, t, n) => {
+	let i = attractPoint(e, t, n);
+	return i.x === e.x && i.y === e.y ? e : {
+		...e,
+		x: i.x,
+		y: i.y
+	};
+}, attractStroke = (e, t, n) => {
+	let i = attractPoint({
+		x: e.x1,
+		y: e.y1
+	}, t, n), a = attractPoint({
+		x: e.x2,
+		y: e.y2
+	}, t, n);
+	return i.x === e.x1 && i.y === e.y1 && a.x === e.x2 && a.y === e.y2 ? e : {
+		...e,
+		x1: i.x,
+		y1: i.y,
+		x2: a.x,
+		y2: a.y
+	};
+}, attract = (e, t, n) => t === null ? e : {
+	dots: e.dots.map((e) => attractDot(e, t, n)),
+	strokes: e.strokes.map((e) => attractStroke(e, t, n))
+}, clamp01$3 = (e) => Math.max(0, Math.min(1, e)), inkColor = (e) => `rgb(${e.r} ${e.g} ${e.b})`, inkAlpha = (e, t) => clamp01$3(1 - clamp01$3(e)) * clamp01$3(t), paintFrame = (e, t, n) => {
+	e.clearRect(0, 0, e.canvas.width, e.canvas.height);
+	let i = inkColor(n.tint), a = [...t.strokes].sort((e, t) => e.depth - t.depth);
+	for (let t of a) e.strokeStyle = i, e.globalAlpha = inkAlpha(t.ink, t.alpha), e.lineWidth = t.width, e.beginPath(), e.moveTo(t.x1, t.y1), e.lineTo(t.x2, t.y2), e.stroke();
+	let o = [...t.dots].sort((e, t) => e.depth - t.depth);
+	for (let t of o) e.fillStyle = i, e.globalAlpha = inkAlpha(t.ink, t.alpha), e.beginPath(), e.arc(t.x, t.y, t.radius, 0, Math.PI * 2), e.fill();
+	e.globalAlpha = 1;
+}, TWO_PI$1 = Math.PI * 2, WORLD_RADIUS_RATIO = .38, clamp01$2 = (e) => Math.max(0, Math.min(1, e)), clamp$1 = (e, t, n) => Math.max(t, Math.min(n, e)), originOf = (e) => e.size / 2, worldRadiusOf = (e) => e.size * WORLD_RADIUS_RATIO, INK_NEAR = .05, INK_FAR = .72, shadeByDepth = (e) => INK_FAR - (INK_FAR - INK_NEAR) * clamp01$2(e), toDot = (e, t, n, i) => ({
+	x: e.x,
+	y: e.y,
+	depth: e.depth,
+	radius: t,
+	ink: clamp01$2(n),
+	alpha: clamp01$2(i)
+}), toStroke = (e, t, n, i, a) => ({
+	x1: e.x,
+	y1: e.y,
+	x2: t.x,
+	y2: t.y,
+	depth: (e.depth + t.depth) / 2,
+	width: n,
+	ink: clamp01$2(i),
+	alpha: clamp01$2(a)
+}), WORKING_TRAIN_BASE_COUNT = 22, WORKING_MIN_TRAINS = {
+	64: 3,
+	32: 3,
+	20: 12
+}, WORKING_TRAIN_LENGTH = 5, WORKING_TRAIN_ARC_SPAN = .5, WORKING_BASE_RADIUS_PX = 1.6, WORKING_ORBIT_COUNT = 6, WORKING_ANGULAR_SPEED = 1.1, WORKING_ORBIT_INK_SPREAD = .3, WORKING_ORBIT_ALPHA_FLOOR = .65, WORKING_TRAIL_ALPHA_FLOOR = .35, workingOrbit = (e) => {
+	let t = e * 31 + 7;
+	return {
+		tilt: (hashUnit(t) - .5) * Math.PI,
+		roll: hashUnit(t + 3) * TWO_PI$1,
+		orbitRadiusFactor: .5 + .45 * hashUnit(t + 5),
+		speedFactor: .6 + 1.3 * hashUnit(t + 9),
+		weight: .35 + .65 * hashUnit(t + 15)
+	};
+}, working = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = Math.max(WORKING_MIN_TRAINS[t.size], n.count(WORKING_TRAIN_BASE_COUNT)), s = WORKING_TRAIN_ARC_SPAN / (WORKING_TRAIN_LENGTH - 1), c = [];
+	for (let t = 0; t < o; t += 1) {
+		let o = workingOrbit(t % WORKING_ORBIT_COUNT), l = hashUnit(t * 5 + 1) * TWO_PI$1 + e * WORKING_ANGULAR_SPEED * o.speedFactor, u = a * o.orbitRadiusFactor;
+		for (let e = 0; e < WORKING_TRAIN_LENGTH; e += 1) {
+			let f = l - e * s, p = project(rotateZ(rotateX({
+				x: Math.cos(f) * u,
+				y: 0,
+				z: Math.sin(f) * u
+			}, o.tilt), o.roll), i, a), h = t * 13 + e * 7 + 2, S = 1 - e / (WORKING_TRAIN_LENGTH - 1), C = shadeByDepth(p.depth) + (hashUnit(h) - .5) * .08 - (o.weight - .5) * WORKING_ORBIT_INK_SPREAD, k = (WORKING_TRAIL_ALPHA_FLOOR + (1 - WORKING_TRAIL_ALPHA_FLOOR) * S) * (WORKING_ORBIT_ALPHA_FLOOR + (1 - WORKING_ORBIT_ALPHA_FLOOR) * o.weight), R = n.radius(WORKING_BASE_RADIUS_PX) * (.75 + .5 * hashUnit(h + 3));
+			c.push(toDot(p, R, C, k));
+		}
+	}
+	return {
+		dots: c,
+		strokes: []
+	};
+}, SEARCHING_BASE_COUNT = 150, SEARCHING_BASE_RADIUS_PX = 1.5, SEARCHING_BAND_HALF_WIDTH = .42, SEARCHING_SWEEP_SPEED = 1.15, SEARCHING_SPIN_SPEED = .18, SEARCHING_TILT = -.55, SEARCHING_ARC_SEGMENTS = 10, SEARCHING_ARC_LATITUDE_SPAN = .92, SEARCHING_BAND_INK_BOOST = .75, SEARCHING_BAND_ALPHA_BOOST = .35, SEARCHING_BAND_RADIUS_BOOST = 1.3, SEARCHING_ARC_STROKE_RADIUS = 2.2, SEARCHING_ARC_INK = 0, SEARCHING_ARC_ALPHA = .7, angleDistance = (e, t) => {
+	let n = Math.abs(e - t) % TWO_PI$1;
+	return n > Math.PI ? TWO_PI$1 - n : n;
+}, searching = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = n.count(SEARCHING_BASE_COUNT), s = e * SEARCHING_SWEEP_SPEED, c = Array.from({ length: o }, (t, c) => {
+		let l = rotateY(rotateX(sampleSphere(c, o, a), SEARCHING_TILT), e * SEARCHING_SPIN_SPEED), u = easeOutCubic(clamp01$2(1 - angleDistance(Math.atan2(l.z, l.x), s) / SEARCHING_BAND_HALF_WIDTH)), f = project(l, i, a), p = shadeByDepth(f.depth) - u * SEARCHING_BAND_INK_BOOST, h = .55 + f.depth * .25 + u * SEARCHING_BAND_ALPHA_BOOST;
+		return toDot(f, n.radius(SEARCHING_BASE_RADIUS_PX) * (1 + u * SEARCHING_BAND_RADIUS_BOOST), p, h);
+	}), l = Array.from({ length: 11 }, (e, t) => {
+		let n = (t / SEARCHING_ARC_SEGMENTS - .5) * Math.PI * SEARCHING_ARC_LATITUDE_SPAN;
+		return project({
+			x: Math.cos(n) * Math.cos(s) * a,
+			y: Math.sin(n) * a,
+			z: Math.cos(n) * Math.sin(s) * a
+		}, i, a);
+	}), u = n.radius(SEARCHING_ARC_STROKE_RADIUS);
+	return {
+		dots: c,
+		strokes: Array.from({ length: SEARCHING_ARC_SEGMENTS }, (e, t) => toStroke(l[t], l[t + 1], u, SEARCHING_ARC_INK, SEARCHING_ARC_ALPHA))
+	};
+}, SOLVING_BASE_COUNT = 130, SOLVING_BASE_RADIUS_PX = 1.5, SOLVING_TIER_COUNT = 4, SOLVING_TURN_DURATION = .16, SOLVING_TURN_GAP = .3, SOLVING_HOLD_GAP = .55, SOLVING_TILT = -.5, SOLVING_LANDMARKS_PER_TIER = 3, SOLVING_LANDMARK_RADIUS_PX = 3.1, SOLVING_LANDMARK_INK_BOOST = .45, SOLVING_LANDMARK_ALPHA = .9, SOLVING_SEAM_SEGMENTS = 12, SOLVING_SEAM_STROKE_RADIUS = 1.05, SOLVING_SEAM_INK = .15, SOLVING_SEAM_ALPHA = .5, solvingTurnStart = (e) => e * SOLVING_TURN_GAP, solvingTurnEnd = (e) => solvingTurnStart(e) + SOLVING_TURN_DURATION, SOLVING_HOLD_START = solvingTurnEnd(SOLVING_TIER_COUNT - 1) + SOLVING_HOLD_GAP, solvingReturnStart = (e) => SOLVING_HOLD_START + (SOLVING_TIER_COUNT - 1 - e) * SOLVING_TURN_GAP, solvingReturnEnd = (e) => solvingReturnStart(e) + SOLVING_TURN_DURATION, SOLVING_CYCLE = solvingReturnEnd(0) + SOLVING_HOLD_GAP, solvingTierTurn = (e, t) => {
+	let n = solvingTurnStart(e), i = solvingTurnEnd(e), a = solvingReturnStart(e), o = solvingReturnEnd(e);
+	return t <= n ? 0 : t < i ? easeOutCubic((t - n) / SOLVING_TURN_DURATION) : t < a ? 1 : t < o ? 1 - easeInOutCubic((t - a) / SOLVING_TURN_DURATION) : 0;
+}, solvingTierOf = (e) => clamp$1(Math.floor((1 - e) / 2 * SOLVING_TIER_COUNT), 0, SOLVING_TIER_COUNT - 1), solvingTierDirection = (e) => hashUnit(e * 53 + 21) < .5 ? -1 : 1, solvingTierCenterYUnit = (e) => 1 - (2 * e + 1) / SOLVING_TIER_COUNT, solvingSeamYUnit = (e) => 1 - 2 * (e + 1) / SOLVING_TIER_COUNT, solvingTurnAngle = (e, t) => solvingTierTurn(e, t) * solvingTierDirection(e) * (Math.PI / 2), solving = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = n.count(SOLVING_BASE_COUNT), s = e - SOLVING_CYCLE * Math.floor(e / SOLVING_CYCLE), c = Array.from({ length: o }, (e, t) => {
+		let c = sampleSphere(t, o, a), l = project(rotateX(rotateY(c, solvingTurnAngle(solvingTierOf(a > 0 ? c.y / a : 0), s)), SOLVING_TILT), i, a), u = shadeByDepth(l.depth), f = .55 + .3 * hashUnit(t * 3 + 9);
+		return toDot(l, n.radius(SOLVING_BASE_RADIUS_PX), u, f);
+	}), l = Array.from({ length: SOLVING_TIER_COUNT * SOLVING_LANDMARKS_PER_TIER }, (e, t) => {
+		let o = Math.floor(t / SOLVING_LANDMARKS_PER_TIER), c = t % SOLVING_LANDMARKS_PER_TIER, l = solvingTierCenterYUnit(o), u = l * a, f = Math.sqrt(Math.max(0, 1 - l * l)) * a, p = hashUnit(o * 29 + 5) * TWO_PI$1 + c / SOLVING_LANDMARKS_PER_TIER * TWO_PI$1, h = project(rotateX(rotateY({
+			x: Math.cos(p) * f,
+			y: u,
+			z: Math.sin(p) * f
+		}, solvingTurnAngle(o, s)), SOLVING_TILT), i, a), S = shadeByDepth(h.depth) - SOLVING_LANDMARK_INK_BOOST;
+		return toDot(h, n.radius(SOLVING_LANDMARK_RADIUS_PX), S, SOLVING_LANDMARK_ALPHA);
+	}), u = n.radius(SOLVING_SEAM_STROKE_RADIUS), f = Array.from({ length: SOLVING_TIER_COUNT - 1 }, (e, t) => {
+		let n = solvingSeamYUnit(t), o = n * a, s = Math.sqrt(Math.max(0, 1 - n * n)) * a, c = Array.from({ length: 13 }, (e, t) => {
+			let n = t / SOLVING_SEAM_SEGMENTS * TWO_PI$1;
+			return project(rotateX({
+				x: Math.cos(n) * s,
+				y: o,
+				z: Math.sin(n) * s
+			}, SOLVING_TILT), i, a);
+		});
+		return Array.from({ length: SOLVING_SEAM_SEGMENTS }, (e, t) => toStroke(c[t], c[t + 1], u, SOLVING_SEAM_INK, SOLVING_SEAM_ALPHA));
+	}).flat();
+	return {
+		dots: [...c, ...l],
+		strokes: f
+	};
+}, LISTENING_RING_COUNT = {
+	64: 5,
+	32: 4,
+	20: 3
+}, LISTENING_DOTS_PER_RING_BASE = 26, LISTENING_MIN_DOTS_PER_RING = 10, LISTENING_BASE_RADIUS_PX = 1.5, LISTENING_WAVE_SPEED = .6, LISTENING_SWELL = .55, LISTENING_LIFT_INK = .45, LISTENING_SPIN_SPEED = .12, LISTENING_TILT = -.13, LISTENING_Y_SPAN = .82, listeningRing = (e, t, n) => {
+	let i = (-1 + (2 * e + 1) / t) * LISTENING_Y_SPAN * n;
+	return {
+		y: i,
+		ringRadius: Math.sqrt(Math.max(0, n * n - i * i)),
+		phase: hashUnit(e * 17 + 3) * TWO_PI$1,
+		wave: (n) => (Math.sin(TWO_PI$1 * (e / t - n * LISTENING_WAVE_SPEED)) + 1) / 2
+	};
+}, listening = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = originOf(t), a = worldRadiusOf(t), o = LISTENING_RING_COUNT[t.size], s = o * LISTENING_DOTS_PER_RING_BASE, c = Math.max(LISTENING_MIN_DOTS_PER_RING, Math.round(n.count(s) / o));
+	return {
+		dots: Array.from({ length: o }, (t, s) => {
+			let l = listeningRing(s, o, a), u = l.wave(e);
+			return Array.from({ length: c }, (t, o) => {
+				let s = o / c * TWO_PI$1 + l.phase, f = project(rotateY(rotateX({
+					x: Math.cos(s) * l.ringRadius,
+					y: l.y,
+					z: Math.sin(s) * l.ringRadius
+				}, LISTENING_TILT), e * LISTENING_SPIN_SPEED), i, a), p = shadeByDepth(f.depth) - u * LISTENING_LIFT_INK, h = .6 + u * .3;
+				return toDot(f, n.radius(LISTENING_BASE_RADIUS_PX) * (1 + u * LISTENING_SWELL), p, h);
+			});
+		}).flat(),
+		strokes: []
+	};
+}, clamp01$1 = (e) => Math.max(0, Math.min(1, e)), SPHERE_RADIUS_RATIO = .4, sphereGeometry = (e) => ({
+	sizing: modeSizing(e.size, e.density, e.dotScale),
+	originPx: e.size / 2,
+	sphereRadius: e.size * SPHERE_RADIUS_RATIO
+}), squaredDistance = (e, t) => {
+	let n = e.x - t.x, i = e.y - t.y, a = e.z - t.z;
+	return n * n + i * i + a * a;
+}, NODE_BASE_COUNT = 16, MIN_NODE_COUNT = 6, NEIGHBOR_COUNT = 3, NODE_BASE_RADIUS = 3.4, PULSE_BASE_RADIUS = 2, EDGE_BASE_WIDTH = 1.1, NODE_ROTATE_SPEED = .35, NODE_TILT = .45, EDGE_FLICKER_SPEED = .5, EDGE_MIN_ALPHA = .25, PULSE_SPEED = .6, nearestNeighborEdges = (e, t) => {
+	let n = e.map((e, t) => t), i = n.flatMap((i) => n.filter((e) => e !== i).sort((t, n) => squaredDistance(e[i], e[t]) - squaredDistance(e[i], e[n])).slice(0, t).map((e) => i < e ? [i, e] : [e, i]));
+	return i.filter(([e, t], n) => i.findIndex(([n, i]) => n === e && i === t) === n);
+}, connecting = (e, t) => {
+	let { sizing: n, originPx: i, sphereRadius: a } = sphereGeometry(t), o = Math.max(MIN_NODE_COUNT, n.count(NODE_BASE_COUNT)), s = Array.from({ length: o }, (e, t) => sampleSphere(t, o, a)), c = s.map((e) => rotateX(e, NODE_TILT)).map((t) => rotateY(t, e * NODE_ROTATE_SPEED)).map((e) => project(e, i, a)), l = c.map((e) => ({
+		x: e.x,
+		y: e.y,
+		depth: e.depth,
+		radius: n.radius(NODE_BASE_RADIUS),
+		ink: clamp01$1(1 - e.depth * .85),
+		alpha: .5 + e.depth * .45
+	})), u = nearestNeighborEdges(s, NEIGHBOR_COUNT), f = u.map(([t, i], a) => {
+		let o = c[t], s = c[i], l = (o.depth + s.depth) / 2, u = .5 + .5 * Math.sin(e * EDGE_FLICKER_SPEED * Math.PI * 2 + hashUnit(a * 97 + 11) * Math.PI * 2);
+		return {
+			x1: o.x,
+			y1: o.y,
+			x2: s.x,
+			y2: s.y,
+			depth: l,
+			width: n.radius(EDGE_BASE_WIDTH),
+			ink: clamp01$1(1 - l * .7),
+			alpha: EDGE_MIN_ALPHA + (1 - EDGE_MIN_ALPHA) * u
+		};
+	}), p = u.map(([t, i], a) => {
+		let o = c[t], s = c[i], l = .5 + .5 * Math.sin(e * PULSE_SPEED * Math.PI * 2 + hashUnit(a * 53 + 7) * Math.PI * 2);
+		return {
+			x: o.x + (s.x - o.x) * l,
+			y: o.y + (s.y - o.y) * l,
+			depth: o.depth + (s.depth - o.depth) * l,
+			radius: n.radius(PULSE_BASE_RADIUS),
+			ink: .05,
+			alpha: .9
+		};
+	});
+	return {
+		dots: [...l, ...p],
+		strokes: f
+	};
+}, STRAND_COUNT = 3, STRAND_POINTS_BASE_COUNT = 26, MIN_STRAND_POINTS = 10, STRAND_WRAPS = 1.1, STRAND_ROTATE_SPEED = .3, STRAND_TILT = .5, STRAND_DOT_BASE_RADIUS = 1.6, STRAND_STROKE_BASE_WIDTH = 1.4, STRAND_BRAID_CYCLES = 2.5, STRAND_BRAID_SWING = 1.3, strandBaseAngle = (e) => e / STRAND_COUNT * Math.PI * 2, strandPoint = (e, t, n, i, a) => {
+	let o = t / (n - 1), s = o * Math.PI - Math.PI / 2, c = i * Math.sin(s), l = i * Math.cos(s), u = strandBaseAngle(e), f = STRAND_BRAID_SWING * Math.sin(o * STRAND_BRAID_CYCLES * Math.PI * 2 + u), p = o * STRAND_WRAPS * Math.PI * 2 + u + f + a * STRAND_ROTATE_SPEED;
+	return rotateX({
+		x: l * Math.cos(p),
+		y: c,
+		z: l * Math.sin(p)
+	}, STRAND_TILT);
+}, weaving = (e, t) => {
+	let { sizing: n, originPx: i, sphereRadius: a } = sphereGeometry(t), o = Math.max(MIN_STRAND_POINTS, n.count(STRAND_POINTS_BASE_COUNT)), s = Array.from({ length: STRAND_COUNT }, (t, n) => Array.from({ length: o }, (t, s) => project(strandPoint(n, s, o, a, e), i, a)));
+	return {
+		dots: s.flatMap((e, t) => e.map((e) => ({
+			x: e.x,
+			y: e.y,
+			depth: e.depth,
+			radius: n.radius(STRAND_DOT_BASE_RADIUS),
+			ink: clamp01$1(1 - e.depth * .8 + t * .08),
+			alpha: .55 + e.depth * .4
+		}))),
+		strokes: s.flatMap((e, t) => e.slice(1).map((i, a) => {
+			let o = e[a], s = (o.depth + i.depth) / 2;
+			return {
+				x1: o.x,
+				y1: o.y,
+				x2: i.x,
+				y2: i.y,
+				depth: s,
+				width: n.radius(STRAND_STROKE_BASE_WIDTH),
+				ink: clamp01$1(1 - s * .75 + t * .06),
+				alpha: .6 + s * .35
+			};
+		}))
+	};
+}, TWO_PI = Math.PI * 2, FORM_RADIUS_RATIO = .4, clamp01 = (e) => Math.max(0, Math.min(1, e)), depthToInk = (e) => clamp01(1 - e), depthToAlpha = (e) => clamp01(.5 + e * .5), depthToRadiusFactor = (e) => .7 + e * .3, dotFrom = (e, t, n, i) => ({
+	x: e.x,
+	y: e.y,
+	depth: e.depth,
+	radius: n.radius(t) * depthToRadiusFactor(e.depth) * i,
+	ink: depthToInk(e.depth),
+	alpha: depthToAlpha(e.depth)
+}), place = (e, t, n, i, a, o, s, c) => dotFrom(project(rotateX(rotateY(e, t), n), i, a), o, s, c), EMPTY_STROKES = [], RIBBON_BASE_COUNT = 260, RIBBON_BASE_DOT_RADIUS = 2.2, RIBBON_THREADS = {
+	64: 7,
+	32: 5,
+	20: 4
+}, RIBBON_HALF_WIDTH = .4, RIBBON_AXIS_TILT = .68, RIBBON_RIPPLE_WAVES = 3, RIBBON_RIPPLE_SPEED = 1.15, RIBBON_RIPPLE_AMPLITUDE = .5, RIBBON_THREAD_JITTER = .1, RIBBON_SPIN_SPEED = .48, RIBBON_CAMERA_TILT = .45, RIBBON_EDGE_ALPHA_FLOOR = .5, RIBBON_EDGE_INK_LIFT = .22, composing = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = RIBBON_THREADS[t.size], s = Math.max(1, Math.ceil(n.count(RIBBON_BASE_COUNT) / o)), c = o * s, l = [];
+	for (let t = 0; t < c; t += 1) {
+		let c = t % o, u = Math.floor(t / o), f = o > 1 ? c / (o - 1) * 2 - 1 : 0, p = u / s * TWO_PI, h = Math.sin(p * RIBBON_RIPPLE_WAVES + e * RIBBON_RIPPLE_SPEED) * RIBBON_RIPPLE_AMPLITUDE, S = f * RIBBON_HALF_WIDTH + h, C = rotateZ({
+			x: Math.cos(S) * Math.cos(p) * i,
+			y: Math.sin(S) * i,
+			z: Math.cos(S) * Math.sin(p) * i
+		}, RIBBON_AXIS_TILT), k = 1 - RIBBON_THREAD_JITTER / 2 + hashUnit(t * 7 + 1) * RIBBON_THREAD_JITTER, R = place(C, e * RIBBON_SPIN_SPEED, RIBBON_CAMERA_TILT, a, i, RIBBON_BASE_DOT_RADIUS, n, k), te = Math.abs(f);
+		l.push({
+			...R,
+			ink: clamp01(R.ink + te * RIBBON_EDGE_INK_LIFT),
+			alpha: clamp01(R.alpha * (1 - te * (1 - RIBBON_EDGE_ALPHA_FLOOR)))
+		});
+	}
+	return {
+		dots: l,
+		strokes: EMPTY_STROKES
+	};
+}, BREATHING_BASE_COUNT = 210, BREATHING_BASE_DOT_RADIUS = 1.7, BREATHING_WORLD_RADIUS_RATIO = .34, BREATHING_AMPLITUDE = .09, BREATHING_SPEED = .55, BREATHING_SHAPE_HARMONIC = 5, BREATHING_SHAPE_SPEED = .22, BREATHING_SHAPE_AMPLITUDE = .035, BREATHING_SPIN_SPEED = .12, BREATHING_TILT = .62, breathing = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * BREATHING_WORLD_RADIUS_RATIO, a = t.size / 2, o = n.count(BREATHING_BASE_COUNT), s = Math.sin(e * BREATHING_SPEED), c = [];
+	for (let t = 0; t < o; t += 1) {
+		let l = t / o * TWO_PI, u = Math.sin(l * BREATHING_SHAPE_HARMONIC + e * BREATHING_SHAPE_SPEED) * BREATHING_SHAPE_AMPLITUDE, f = 1 + s * BREATHING_AMPLITUDE + u, p = {
+			x: Math.cos(l) * f * i,
+			y: 0,
+			z: Math.sin(l) * f * i
+		}, h = .88 + hashUnit(t * 11 + 5) * .24;
+		c.push(place(p, e * BREATHING_SPIN_SPEED, BREATHING_TILT, a, i, BREATHING_BASE_DOT_RADIUS, n, h));
+	}
+	return {
+		dots: c,
+		strokes: EMPTY_STROKES
+	};
+}, SHAPING_BASE_COUNT = 210, SHAPING_BASE_DOT_RADIUS = 1.7, SHAPING_CYCLE_SECONDS = 12, SHAPING_SPIN_SPEED = 2 * Math.PI / SHAPING_CYCLE_SECONDS, SHAPING_TILT = .6, polygonRadius = (e, t) => {
+	let n = TWO_PI / t, i = n / 2, a = (e % n + n) % n;
+	return Math.cos(i) / Math.cos(a - i);
+}, lerp = (e, t, n) => e + (t - e) * n, shaping = (e, t) => {
+	let n = modeSizing(t.size, t.density, t.dotScale), i = t.size * FORM_RADIUS_RATIO, a = t.size / 2, o = n.count(SHAPING_BASE_COUNT), s = (e / SHAPING_CYCLE_SECONDS % 1 + 1) % 1 * 3, c = Math.min(2, Math.floor(s)), l = easeInOutCubic(s - c), u = [];
+	for (let t = 0; t < o; t += 1) {
+		let s = t / o * TWO_PI, f = polygonRadius(s, 3), p = polygonRadius(s, 4), h;
+		h = c === 0 ? lerp(1, f, l) : c === 1 ? lerp(f, p, l) : lerp(p, 1, l);
+		let S = {
+			x: Math.cos(s) * h * i,
+			y: 0,
+			z: Math.sin(s) * h * i
+		}, C = .9 + hashUnit(t * 17 + 9) * .2;
+		u.push(place(S, e * SHAPING_SPIN_SPEED, SHAPING_TILT, a, i, SHAPING_BASE_DOT_RADIUS, n, C));
+	}
+	return {
+		dots: u,
+		strokes: EMPTY_STROKES
+	};
+}, MODES = {
+	working,
+	searching,
+	solving,
+	listening,
+	connecting,
+	weaving,
+	composing,
+	breathing,
+	shaping
+}, root$43 = /* @__PURE__ */ from_html("<canvas role=\"img\"></canvas>");
+function ThinkingOrb(e, t) {
+	push(t, !0);
+	let n = prop(t, "state", 7, "working"), i = prop(t, "size", 7, 64), a = prop(t, "speed", 7, 1), o = prop(t, "paused", 7, !1), s = prop(t, "color", 7), c = prop(t, "dots", 7, 1), l = prop(t, "dotSize", 7, 1), u = prop(t, "gravity", 7, !1), f = prop(t, "ariaLabel", 7), p = prop(t, "classes", 7), h = prop(t, "testId", 7), S = prop(t, "onfirstframe", 7), C = [
+		64,
+		32,
+		20
+	], k = {
+		r: 128,
+		g: 128,
+		b: 128
+	}, R = 2.4, te = 2, ne = /* @__PURE__ */ user_derived(() => Object.hasOwn(MODES, n()) ? n() : "working"), re = /* @__PURE__ */ user_derived(() => C.includes(i()) ? i() : 64), G = /* @__PURE__ */ user_derived(() => Math.max(.1, c())), be = /* @__PURE__ */ user_derived(() => Math.max(.1, l())), Me = /* @__PURE__ */ user_derived(() => !u() || get(Ue) ? null : u() === !0 ? GRAVITY_DEFAULTS : u()), Re = /* @__PURE__ */ state(null), Ue = /* @__PURE__ */ state(proxy(prefersReducedMotion())), it = /* @__PURE__ */ state(!0), at = /* @__PURE__ */ state(!0), ot = !1, ct = "", lt = k, ut = null, dt = 0, ft = 0, pt = /* @__PURE__ */ user_derived(() => !o() && !get(Ue) && get(it) && get(at)), mt = () => get(Ue) ? 2.4 : ft, ht = (e, t) => {
+		if (t.length === 0) return null;
+		let n = e.fillStyle;
+		e.fillStyle = "#000000", e.fillStyle = t;
+		let i = e.fillStyle;
+		e.fillStyle = "#ffffff", e.fillStyle = t;
+		let a = e.fillStyle;
+		return e.fillStyle = n, typeof i == "string" && i === a ? i : null;
+	}, gt = (e) => {
+		let t = getComputedStyle(e), n = t.getPropertyValue("--sui-thinking-orb-color").trim(), i = t.color.trim();
+		return {
+			declared: n,
+			inherited: i,
+			key: `${n}|${i}`
+		};
+	}, _t = (e) => {
+		if (s()) return s();
+		if (get(Re) === null) return lt;
+		let { declared: t, inherited: n, key: i } = gt(get(Re));
+		if (i === ct) return lt;
+		ct = i;
+		let a = ht(e, t) ?? ht(e, n);
+		return lt = (a === null ? null : parseCssColor(a)) ?? k, lt;
+	}, vt = () => {
+		get(pt) || get(Me) === null || Ct(mt());
+	}, yt = () => {
+		get(pt) || s() || get(Re) === null || gt(get(Re)).key !== ct && Ct(mt());
+	}, bt = (e) => {
+		if (get(Re) === null || !u()) return;
+		let t = get(Re).getBoundingClientRect();
+		ut = {
+			x: e.clientX - t.left,
+			y: e.clientY - t.top
+		}, vt();
+	}, xt = () => {
+		ut = null, vt();
+	}, St = () => typeof window > "u" ? 1 : Math.min(2, window.devicePixelRatio ?? 1), Ct = (e) => {
+		if (get(Re) === null) return;
+		let t = get(Re).getContext("2d");
+		if (t === null) return;
+		let n = St(), i = Math.round(get(re) * n);
+		(get(Re).width !== i || get(Re).height !== i) && (get(Re).width = i, get(Re).height = i), t.setTransform(n, 0, 0, n, 0, 0);
+		let a = MODES[get(ne)](e, {
+			size: get(re),
+			density: get(G),
+			dotScale: get(be)
+		}), o = get(Me);
+		paintFrame(t, o === null ? a : attract(a, ut, o), { tint: _t(t) }), ot || (ot = !0, S()?.());
+	};
+	user_effect(() => {
+		if (Ct(mt()), !get(pt)) return;
+		let e = null, t = (n) => {
+			let i = e === null ? 0 : (n - e) / 1e3;
+			e = n, ft += i * a(), Ct(ft), dt = requestAnimationFrame(t);
+		};
+		return dt = requestAnimationFrame(t), () => cancelAnimationFrame(dt);
+	}), onMount(() => {
+		if (get(Re) === null) return;
+		let e = null;
+		typeof IntersectionObserver < "u" && (e = new IntersectionObserver(([e]) => {
+			set(it, e.isIntersecting, !0);
+		}), e.observe(get(Re)));
+		let t = () => {
+			set(at, document.visibilityState !== "hidden");
+		};
+		document.addEventListener("visibilitychange", t);
+		let n = null;
+		typeof MutationObserver < "u" && (n = new MutationObserver(yt), n.observe(document.documentElement, { attributes: !0 }), n.observe(document.body, { attributes: !0 }));
+		let i = (e) => {
+			set(Ue, e.matches, !0);
+		}, a = null;
+		typeof window.matchMedia == "function" && (a = window.matchMedia("(prefers-reduced-motion: reduce)"), a.addEventListener("change", i));
+		let o = null;
+		typeof window.matchMedia == "function" && (o = window.matchMedia("(prefers-color-scheme: dark)"), o.addEventListener("change", yt));
+		let s = (e) => {
+			e.propertyName !== "color" && e.propertyName !== "--sui-thinking-orb-color" || yt();
+		};
+		return document.addEventListener("transitionend", s), () => {
+			e?.disconnect(), document.removeEventListener("visibilitychange", t), document.removeEventListener("transitionend", s), n?.disconnect(), a?.removeEventListener("change", i), o?.removeEventListener("change", yt);
+		};
+	});
+	var wt = {
+		get state() {
+			return n();
+		},
+		set state(e = "working") {
+			n(e), flushSync();
+		},
+		get size() {
+			return i();
+		},
+		set size(e = 64) {
+			i(e), flushSync();
+		},
+		get speed() {
+			return a();
+		},
+		set speed(e = 1) {
+			a(e), flushSync();
+		},
+		get paused() {
+			return o();
+		},
+		set paused(e = !1) {
+			o(e), flushSync();
+		},
+		get color() {
+			return s();
+		},
+		set color(e) {
+			s(e), flushSync();
+		},
+		get dots() {
+			return c();
+		},
+		set dots(e = 1) {
+			c(e), flushSync();
+		},
+		get dotSize() {
+			return l();
+		},
+		set dotSize(e = 1) {
+			l(e), flushSync();
+		},
+		get gravity() {
+			return u();
+		},
+		set gravity(e = !1) {
+			u(e), flushSync();
+		},
+		get ariaLabel() {
+			return f();
+		},
+		set ariaLabel(e) {
+			f(e), flushSync();
+		},
+		get classes() {
+			return p();
+		},
+		set classes(e) {
+			p(e), flushSync();
+		},
+		get testId() {
+			return h();
+		},
+		set testId(e) {
+			h(e), flushSync();
+		},
+		get onfirstframe() {
+			return S();
+		},
+		set onfirstframe(e) {
+			S(e), flushSync();
+		}
+	}, Tt = root$43();
+	let Et;
+	return bind_this(Tt, (e) => set(Re, e), () => get(Re)), template_effect((e) => {
+		set_attribute(Tt, "aria-label", e), set_class(Tt, 1, clsx(p())), set_attribute(Tt, "data-pw", typeof h() == "string" ? h() : null), Et = set_style(Tt, "", Et, {
+			width: `${get(re)}px`,
+			height: `${get(re)}px`,
+			display: "block"
+		});
+	}, [() => f() ?? `${get(ne).charAt(0).toUpperCase()}${get(ne).slice(1)}…`]), delegated("pointermove", Tt, bt), event("pointerleave", Tt, xt), event("pointercancel", Tt, xt), append(e, Tt), pop(wt);
+}
+delegate(["pointermove"]), create_custom_element(ThinkingOrb, {
+	state: {},
+	size: {},
+	speed: {},
+	paused: {},
+	color: {},
+	dots: {},
+	dotSize: {},
+	gravity: {},
+	ariaLabel: {},
+	classes: {},
+	testId: {},
+	onfirstframe: {}
+}, [], [], { mode: "open" });
+//#endregion
+//#region src/wc/components/ThinkingOrb.wc.svelte
+var rest_excludes$41 = new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"$$host",
+	"orbAriaLabel"
+]), $$css$85 = {
+	hash: "svelte-ite4ug",
+	code: "\n  /* A custom element defaults to `display: inline`; ThinkingOrb.svelte's root\n     canvas is sized in inline styles (width/height: size px), which works\n     either way, but every other wrapper in this repo sets this for\n     consistency and to give a consumer a token to override without reaching\n     into the shadow root. */:host {display:var(--sui-thinking-orb-display, block);}"
+};
+function ThinkingOrb_wc(e, t) {
+	push(t, !0), append_styles$1(e, $$css$85);
+	let n = prop(t, "orbAriaLabel", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$41), a = t.$$host, o = /* @__PURE__ */ user_derived(() => dispatchEvents(a, i));
+	return ThinkingOrb(e, spread_props(() => i, () => get(o), { get ariaLabel() {
+		return n();
+	} })), pop({
+		get orbAriaLabel() {
+			return n();
+		},
+		set orbAriaLabel(e) {
+			n(e), flushSync();
+		}
+	});
+}
+customElements.define("sui-thinking-orb", create_custom_element(ThinkingOrb_wc, {
+	state: { type: "String" },
+	size: { type: "Number" },
+	speed: { type: "Number" },
+	paused: { type: "Boolean" },
+	color: { type: "Object" },
+	dots: { type: "Number" },
+	dotSize: {
+		attribute: "dot-size",
+		type: "Number"
+	},
+	gravity: { type: "Object" },
+	classes: { type: "String" },
+	testId: {
+		attribute: "test-id",
+		type: "String"
+	},
+	orbAriaLabel: {
+		attribute: "aria-label",
+		type: "String"
+	},
+	onfirstframe: { type: "Object" }
+}, [], [], { mode: "open" }));
+//#endregion
 //#region src/lib/Toast/Toast.svelte
 var root$42 = /* @__PURE__ */ from_html("<div class=\"toast-icon-wrapper svelte-37crwe\"><!></div>"), root_1$39 = /* @__PURE__ */ from_html("<div class=\"toast-subtext svelte-37crwe\"> </div>"), root_2$30 = /* @__PURE__ */ from_html("<div class=\"close-button svelte-37crwe\" tabindex=\"0\" role=\"button\"><!></div>"), root_3$27 = /* @__PURE__ */ from_html("<div role=\"alert\" aria-live=\"assertive\"><!> <div class=\"toast-message svelte-37crwe\"> <!> <!></div> <!></div>"), $$css$84 = {
 	hash: "svelte-37crwe",