@juspay/svelte-ui-components 4.9.2 → 4.10.1

package/dist-wc/index.js

@@ -5745,8 +5745,8 @@ var checkmark_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"curre
 };
 function Checkbox(e, t) {
 	push(t, !0), append_styles$1(e, $$css$77);
-	let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "indeterminate", 15, !1), s = prop(t, "testId", 7), c = prop(t, "checkedIcon", 7), l = prop(t, "indeterminateIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "ariaControls", 7), h = prop(t, "ariaLabel", 7), S = prop(t, "controlled", 7, !1), C = prop(t, "attributes", 7);
-	function k() {
+	let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "indeterminate", 15, !1), s = prop(t, "testId", 7), c = prop(t, "checkedIcon", 7), l = prop(t, "indeterminateIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "ariaControls", 7), h = prop(t, "ariaLabel", 7), S = prop(t, "controlled", 7, !1), C = prop(t, "attributes", 7), k = /* @__PURE__ */ user_derived(() => n().length > 0 ? n() : typeof h() == "string" && h().trim() !== "" ? h() : null);
+	function R() {
 		if (!a()) {
 			if (S()) {
 				u()?.(!i());
@@ -5755,10 +5755,10 @@ function Checkbox(e, t) {
 			i(!i()), o() && o(!1), u()?.(i());
 		}
 	}
-	function R(e) {
-		(e.key === " " || e.key === "Enter") && (e.preventDefault(), k());
+	function G(e) {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), R());
 	}
-	var G = {
+	var te = {
 		get text() {
 			return n();
 		},
@@ -5837,20 +5837,20 @@ function Checkbox(e, t) {
 		set attributes(e) {
 			C(e), flushSync();
 		}
-	}, te = root_2$50();
-	let ne;
-	var re = child(te);
-	remove_input_defaults(re), set_attribute(re, "tabindex", -1);
-	var be = sibling(re, 2);
-	attribute_effect(be, () => ({
+	}, ne = root_2$50();
+	let re;
+	var be = child(ne);
+	remove_input_defaults(be), set_attribute(be, "tabindex", -1);
+	var Me = sibling(be, 2);
+	attribute_effect(Me, () => ({
 		class: "box",
 		role: "checkbox",
 		tabindex: a() ? -1 : 0,
 		"aria-checked": o() ? "mixed" : i(),
 		"aria-disabled": a(),
 		"aria-controls": p() ?? null,
-		"aria-label": n().length === 0 ? h() ?? null : null,
-		onkeydown: R,
+		"aria-label": get(k),
+		onkeydown: G,
 		"data-pw": typeof s() == "string" ? `${s()}-box` : null,
 		testID: typeof s() == "string" ? `${s()}-box` : null,
 		...C(),
@@ -5859,7 +5859,7 @@ function Checkbox(e, t) {
 			indeterminate: o()
 		}
 	}), void 0, void 0, void 0, "svelte-f1in4m");
-	var Me = child(be), Re = (e) => {
+	var Re = child(Me), Ue = (e) => {
 		var t = comment(), n = first_child(t), i = (e) => {
 			var t = comment();
 			snippet(first_child(t), c), append(e, t);
@@ -5871,10 +5871,10 @@ function Checkbox(e, t) {
 			typeof c() == "function" ? e(i) : e(a, -1);
 		}), append(e, t);
 	};
-	if_block(Me, (e) => {
-		i() && !o() && e(Re);
+	if_block(Re, (e) => {
+		i() && !o() && e(Ue);
 	});
-	var Ue = sibling(Me, 2), it = (e) => {
+	var it = sibling(Re, 2), at = (e) => {
 		var t = comment(), n = first_child(t), i = (e) => {
 			var t = comment();
 			snippet(first_child(t), l), append(e, t);
@@ -5886,15 +5886,15 @@ function Checkbox(e, t) {
 			typeof l() == "function" ? e(i) : e(a, -1);
 		}), append(e, t);
 	};
-	if_block(Ue, (e) => {
-		o() && e(it);
-	}), reset(be);
-	var at = sibling(be, 2), ot = child(at, !0);
-	return reset(at), reset(te), template_effect(() => {
-		ne = set_class(te, 1, `container ${f() ?? "" ?? ""}`, "svelte-f1in4m", ne, { disabled: a() }), set_attribute(te, "data-pw", s()), set_attribute(te, "testid", s()), set_checked(re, i()), re.disabled = a(), set_attribute(re, "data-pw", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(re, "testid", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(at, "hidden", n().length === 0), set_text(ot, n());
-	}), delegated("click", te, (e) => {
-		e.preventDefault(), k();
-	}), delegated("click", re, (e) => e.stopPropagation()), append(e, te), pop(G);
+	if_block(it, (e) => {
+		o() && e(at);
+	}), reset(Me);
+	var ot = sibling(Me, 2), ct = child(ot, !0);
+	return reset(ot), reset(ne), template_effect(() => {
+		re = set_class(ne, 1, `container ${f() ?? "" ?? ""}`, "svelte-f1in4m", re, { disabled: a() }), set_attribute(ne, "data-pw", s()), set_attribute(ne, "testid", s()), set_checked(be, i()), be.disabled = a(), set_attribute(be, "data-pw", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(be, "testid", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(ot, "hidden", n().length === 0), set_text(ct, n());
+	}), delegated("click", ne, (e) => {
+		e.preventDefault(), R();
+	}), delegated("click", be, (e) => e.stopPropagation()), append(e, ne), pop(te);
 }
 delegate(["click"]), create_custom_element(Checkbox, {
 	text: {},
@@ -7196,14 +7196,14 @@ var root$73 = /* @__PURE__ */ from_html("<span class=\"slider-value svelte-17e64
 };
 function Slider(e, t) {
 	push(t, !0), append_styles$1(e, $$css$73);
-	let n = prop(t, "value", 15, 0), i = prop(t, "min", 7, 0), a = prop(t, "max", 7, 100), o = prop(t, "step", 7, 1), s = prop(t, "disabled", 7, !1), c = prop(t, "showValue", 7, !1), l = prop(t, "labelFormatter", 7), u = prop(t, "ariaLabel", 7), f = prop(t, "testId", 7), p = prop(t, "onchange", 7), h = prop(t, "oninput", 7), S = prop(t, "classes", 7), C = /* @__PURE__ */ user_derived(() => (n() - i()) / (a() - i()) * 100), k = /* @__PURE__ */ user_derived(() => l() ? l()(n()) : String(n()));
-	function R(e) {
-		e.target instanceof HTMLInputElement && (n(Number(e.target.value)), h()?.(n()));
-	}
+	let n = prop(t, "value", 15, 0), i = prop(t, "min", 7, 0), a = prop(t, "max", 7, 100), o = prop(t, "step", 7, 1), s = prop(t, "disabled", 7, !1), c = prop(t, "showValue", 7, !1), l = prop(t, "labelFormatter", 7), u = prop(t, "ariaLabel", 7), f = prop(t, "ariaLabelledby", 7), p = prop(t, "testId", 7), h = prop(t, "onchange", 7), S = prop(t, "oninput", 7), C = prop(t, "classes", 7), k = /* @__PURE__ */ user_derived(() => (n() - i()) / (a() - i()) * 100), R = /* @__PURE__ */ user_derived(() => l() ? l()(n()) : String(n()));
 	function G(e) {
-		e.target instanceof HTMLInputElement && (n(Number(e.target.value)), p()?.(n()));
+		e.target instanceof HTMLInputElement && (n(Number(e.target.value)), S()?.(n()));
 	}
-	var te = {
+	function te(e) {
+		e.target instanceof HTMLInputElement && (n(Number(e.target.value)), h()?.(n()));
+	}
+	var ne = {
 		get value() {
 			return n();
 		},
@@ -7252,43 +7252,49 @@ function Slider(e, t) {
 		set ariaLabel(e) {
 			u(e), flushSync();
 		},
-		get testId() {
+		get ariaLabelledby() {
 			return f();
 		},
-		set testId(e) {
+		set ariaLabelledby(e) {
 			f(e), flushSync();
 		},
-		get onchange() {
+		get testId() {
 			return p();
 		},
-		set onchange(e) {
+		set testId(e) {
 			p(e), flushSync();
 		},
-		get oninput() {
+		get onchange() {
 			return h();
 		},
-		set oninput(e) {
+		set onchange(e) {
 			h(e), flushSync();
 		},
-		get classes() {
+		get oninput() {
 			return S();
 		},
-		set classes(e) {
+		set oninput(e) {
 			S(e), flushSync();
+		},
+		get classes() {
+			return C();
+		},
+		set classes(e) {
+			C(e), flushSync();
 		}
-	}, ne = root_1$62();
-	let re;
-	var be = child(ne);
-	remove_input_defaults(be);
-	var Me = sibling(be, 2), Re = (e) => {
+	}, re = root_1$62();
+	let be;
+	var Me = child(re);
+	remove_input_defaults(Me);
+	var Re = sibling(Me, 2), Ue = (e) => {
 		var t = root$73(), n = child(t, !0);
-		reset(t), template_effect(() => set_text(n, get(k))), append(e, t);
+		reset(t), template_effect(() => set_text(n, get(R))), append(e, t);
 	};
-	return if_block(Me, (e) => {
-		c() && e(Re);
-	}), reset(ne), template_effect(() => {
-		re = set_class(ne, 1, `slider-container ${S() ?? "" ?? ""}`, "svelte-17e64va", re, { disabled: s() }), set_attribute(be, "min", i()), set_attribute(be, "max", a()), set_attribute(be, "step", o()), set_value(be, n()), be.disabled = s(), set_attribute(be, "aria-label", typeof u() == "string" ? u() : null), set_attribute(be, "data-pw", typeof f() == "string" ? f() : null), set_attribute(be, "testid", typeof f() == "string" ? f() : null), set_style(be, `--slider-fill-percent: ${get(C) ?? ""}%`);
-	}), delegated("input", be, R), delegated("change", be, G), append(e, ne), pop(te);
+	return if_block(Re, (e) => {
+		c() && e(Ue);
+	}), reset(re), template_effect(() => {
+		be = set_class(re, 1, `slider-container ${C() ?? "" ?? ""}`, "svelte-17e64va", be, { disabled: s() }), set_attribute(Me, "min", i()), set_attribute(Me, "max", a()), set_attribute(Me, "step", o()), set_value(Me, n()), Me.disabled = s(), set_attribute(Me, "aria-label", typeof u() == "string" ? u() : null), set_attribute(Me, "aria-labelledby", typeof u() == "string" ? null : f() ?? null), set_attribute(Me, "data-pw", typeof p() == "string" ? p() : null), set_attribute(Me, "testid", typeof p() == "string" ? p() : null), set_style(Me, `--slider-fill-percent: ${get(k) ?? ""}%`);
+	}), delegated("input", Me, G), delegated("change", Me, te), append(e, re), pop(ne);
 }
 delegate(["input", "change"]), create_custom_element(Slider, {
 	value: {},
@@ -7299,6 +7305,7 @@ delegate(["input", "change"]), create_custom_element(Slider, {
 	showValue: {},
 	labelFormatter: {},
 	ariaLabel: {},
+	ariaLabelledby: {},
 	testId: {},
 	onchange: {},
 	oninput: {},
@@ -8668,197 +8675,209 @@ customElements.define("sui-combobox", create_custom_element(Combobox_wc, {
 }, [], [], { mode: "open" }));
 //#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$69 = /* @__PURE__ */ from_html("<span class=\"command-menu-search-icon svelte-rk55q\"></span>"), root_1$58 = /* @__PURE__ */ from_html("<div class=\"command-menu-empty svelte-rk55q\"> </div>"), root_2$44 = /* @__PURE__ */ from_html("<div class=\"command-menu-group-heading svelte-rk55q\"> </div>"), root_3$39 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-icon svelte-rk55q\"><!></span>"), root_4$31 = /* @__PURE__ */ from_html("<div class=\"command-menu-item-icon-img-wrapper svelte-rk55q\"><!></div>"), root_5$26 = /* @__PURE__ */ from_html("<kbd class=\"command-menu-kbd svelte-rk55q\"> </kbd>"), root_6$22 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-shortcut svelte-rk55q\"></span>"), root_7$19 = /* @__PURE__ */ from_html("<button type=\"button\" role=\"option\" tabindex=\"-1\"><!> <span class=\"command-menu-item-label svelte-rk55q\"> </span> <!></button>"), root_8$17 = /* @__PURE__ */ from_html("<!> <!>", 1), root_9$12 = /* @__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\"/></div> <div class=\"command-menu-separator svelte-rk55q\"></div> <div class=\"command-menu-list svelte-rk55q\" role=\"listbox\"><!></div></div></div>"), $$css$69 = {
+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$69 = /* @__PURE__ */ from_html("<span class=\"command-menu-search-icon svelte-rk55q\"></span>"), root_1$58 = /* @__PURE__ */ from_html("<div class=\"command-menu-empty svelte-rk55q\"> </div>"), root_2$44 = /* @__PURE__ */ from_html("<div class=\"command-menu-group-heading svelte-rk55q\"> </div>"), root_3$39 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-icon svelte-rk55q\"><!></span>"), root_4$31 = /* @__PURE__ */ from_html("<div class=\"command-menu-item-icon-img-wrapper svelte-rk55q\"><!></div>"), root_5$26 = /* @__PURE__ */ from_html("<kbd class=\"command-menu-kbd svelte-rk55q\"> </kbd>"), root_6$22 = /* @__PURE__ */ from_html("<span class=\"command-menu-item-shortcut svelte-rk55q\"></span>"), root_7$19 = /* @__PURE__ */ from_html("<button type=\"button\" role=\"option\" tabindex=\"-1\"><!> <span class=\"command-menu-item-label svelte-rk55q\"> </span> <!></button>"), root_8$17 = /* @__PURE__ */ from_html("<!> <!>", 1), root_9$12 = /* @__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$69 = {
 	hash: "svelte-rk55q",
 	code: ".command-menu-overlay.svelte-rk55q {position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--command-menu-overlay-background, rgba(0, 0, 0, 0.5));display:flex;align-items:var(--command-menu-overlay-align, flex-start);justify-content:center;padding-top:var(--command-menu-overlay-padding-top, 20vh);z-index:var(--command-menu-z-index, 50);-webkit-tap-highlight-color:transparent;}.command-menu-dialog.svelte-rk55q {background-color:var(--command-menu-background, #ffffff);border-radius:var(--command-menu-border-radius, var(--radius, 4px));box-shadow:var(--command-menu-box-shadow, 0 16px 70px rgba(0, 0, 0, 0.2));width:var(--command-menu-width, 560px);max-width:var(--command-menu-max-width, 90vw);max-height:var(--command-menu-max-height, 60vh);display:flex;flex-direction:column;overflow:hidden;border:var(--command-menu-border, 1px solid #e2e8f0);}.command-menu-input-wrapper.svelte-rk55q {display:flex;align-items:center;padding:var(--command-menu-input-wrapper-padding, 12px 16px);gap:var(--command-menu-input-wrapper-gap, 10px);}.command-menu-search-icon.svelte-rk55q {display:inline-flex;align-items:center;justify-content:center;width:var(--command-menu-search-icon-size, 20px);height:var(--command-menu-search-icon-size, 20px);color:var(--command-menu-search-icon-color, #94a3b8);flex-shrink:0;}.command-menu-search-icon.svelte-rk55q svg {width:100%;height:100%;}.command-menu-input.svelte-rk55q {flex:1;border:none;outline:none;background:transparent;font-size:var(--command-menu-input-font-size, 16px);font-family:var(--command-menu-input-font-family, inherit);font-weight:var(--command-menu-input-font-weight, 400);color:var(--command-menu-input-color, #1e293b);caret-color:var(--command-menu-input-caret-color, #3b82f6);}.command-menu-input.svelte-rk55q::placeholder {color:var(--command-menu-input-placeholder-color, #94a3b8);}.command-menu-separator.svelte-rk55q {height:var(--command-menu-separator-height, 1px);background-color:var(--command-menu-separator-color, #e2e8f0);flex-shrink:0;}.command-menu-list.svelte-rk55q {overflow-y:auto;padding:var(--command-menu-list-padding, 8px);scrollbar-width:var(--command-menu-scrollbar-width, thin);}.command-menu-empty.svelte-rk55q {padding:var(--command-menu-empty-padding, 32px 16px);text-align:center;color:var(--command-menu-empty-color, #94a3b8);font-size:var(--command-menu-empty-font-size, 14px);font-style:var(--command-menu-empty-font-style, normal);}.command-menu-group-heading.svelte-rk55q {padding:var(--command-menu-group-heading-padding, 8px 12px 4px);font-size:var(--command-menu-group-heading-font-size, 12px);font-weight:var(--command-menu-group-heading-font-weight, 600);color:var(--command-menu-group-heading-color, #94a3b8);text-transform:var(--command-menu-group-heading-text-transform, uppercase);letter-spacing:var(--command-menu-group-heading-letter-spacing, 0.05em);}.command-menu-item.svelte-rk55q {display:flex;align-items:center;padding:var(--command-menu-item-padding, 10px 12px);border-radius:var(--command-menu-item-border-radius, var(--radius, 4px));cursor:pointer;gap:var(--command-menu-item-gap, 10px);font-size:var(--command-menu-item-font-size, 14px);color:var(--command-menu-item-color, #334155);transition:background-color 0.1s;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$69);
-	let n = prop(t, "items", 7), i = prop(t, "open", 15, !1), a = prop(t, "placeholder", 7, "Search commands..."), o = prop(t, "emptyText", 7, "No results found."), s = prop(t, "testId", 7), c = prop(t, "itemIcon", 7), l = prop(t, "searchIcon", 7), u = prop(t, "onselect", 7), f = prop(t, "onclose", 7), p = prop(t, "classes", 7), h = /* @__PURE__ */ state(""), S = /* @__PURE__ */ state(0), C = /* @__PURE__ */ state(null), k = /* @__PURE__ */ state(null), R = /* @__PURE__ */ user_derived(() => {
-		if (get(h).trim() === "") return n();
-		let e = get(h).toLowerCase();
-		return n().filter((t) => t.label.toLowerCase().includes(e));
-	}), G = /* @__PURE__ */ user_derived(() => {
+	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 = /* @__PURE__ */ state(""), k = /* @__PURE__ */ state(0), R = /* @__PURE__ */ state(null), G = /* @__PURE__ */ state(null), te = /* @__PURE__ */ state(null), ne = null, re = /* @__PURE__ */ user_derived(() => {
+		if (get(C).trim() === "") return i();
+		let e = get(C).toLowerCase();
+		return i().filter((t) => t.label.toLowerCase().includes(e));
+	}), be = /* @__PURE__ */ user_derived(() => {
 		let e = new SvelteMap();
-		for (let t of get(R)) {
+		for (let t of get(re)) {
 			let n = t.group ?? "";
 			e.has(n) || e.set(n, []);
 			let i = e.get(n);
 			Array.isArray(i) && i.push(t);
 		}
 		return e;
-	}), te = /* @__PURE__ */ user_derived(() => {
+	}), Me = /* @__PURE__ */ user_derived(() => {
 		let e = [];
-		for (let [, t] of get(G)) for (let n of t) e.push(n);
+		for (let [, t] of get(be)) for (let n of t) e.push(n);
 		return e;
-	}), ne = /* @__PURE__ */ user_derived(() => {
+	}), Re = /* @__PURE__ */ user_derived(() => {
 		let e = new SvelteMap();
-		for (let t = 0; t < get(te).length; t++) {
-			let n = get(te).at(t);
+		for (let t = 0; t < get(Me).length; t++) {
+			let n = get(Me).at(t);
 			typeof n == "object" && e.set(n.value, t);
 		}
 		return e;
-	});
-	function re() {
-		i(!1), set(h, ""), set(S, 0), f()?.();
+	}), Ue = /* @__PURE__ */ user_derived(() => get(Me).length > 0 ? `command-menu-option-${n}-${get(k)}` : null);
+	function it() {
+		a(!1), set(C, ""), set(k, 0), p()?.();
 	}
-	function be(e) {
-		e.disabled || (u()?.(e), re());
+	function at(e) {
+		e.disabled || (f()?.(e), it());
 	}
-	function Me(e, t) {
+	function ot(e, t) {
 		let n = e + t;
-		for (; n >= 0 && n < get(te).length;) {
-			let e = get(te).at(n);
+		for (; n >= 0 && n < get(Me).length;) {
+			let e = get(Me).at(n);
 			if (typeof e == "object" && !e.disabled) return n;
 			n += t;
 		}
 		return -1;
 	}
-	function Re(e) {
-		if (i()) switch (e.key) {
+	function ct(e) {
+		if (a()) switch (e.key) {
 			case "ArrowDown": {
 				e.preventDefault();
-				let t = Me(get(S), 1);
-				t >= 0 && (set(S, t, !0), Ue());
+				let t = ot(get(k), 1);
+				t >= 0 && (set(k, t, !0), ut());
 				break;
 			}
 			case "ArrowUp": {
 				e.preventDefault();
-				let t = Me(get(S), -1);
-				t >= 0 && (set(S, t, !0), Ue());
+				let t = ot(get(k), -1);
+				t >= 0 && (set(k, t, !0), ut());
 				break;
 			}
 			case "Enter": {
 				e.preventDefault();
-				let t = get(te).at(get(S));
-				typeof t == "object" && !t.disabled && be(t);
+				let t = get(Me).at(get(k));
+				typeof t == "object" && !t.disabled && at(t);
 				break;
 			}
 			case "Escape":
-				e.preventDefault(), re();
+				e.preventDefault(), it();
+				break;
+			case "Tab": {
+				let t = lt();
+				if (t.length === 0) break;
+				e.preventDefault();
+				let n = document.activeElement, i = ((n instanceof HTMLElement ? t.indexOf(n) : -1) + (e.shiftKey ? -1 : 1) + t.length) % t.length;
+				t.at(i)?.focus();
 				break;
+			}
 		}
 	}
-	async function Ue() {
-		if (await tick(), get(k) !== null) {
-			let e = get(k).querySelector("[data-active=\"true\"]");
+	function lt() {
+		return get(te) === null ? [] : [...get(te).querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]")].filter((e) => e.getAttribute("tabindex") !== "-1" && (e.offsetParent !== null || e === document.activeElement));
+	}
+	async function ut() {
+		if (await tick(), get(G) !== null) {
+			let e = get(G).querySelector("[data-active=\"true\"]");
 			e !== null && e.scrollIntoView({ block: "nearest" });
 		}
 	}
-	function it(e) {
-		e.target === e.currentTarget && re();
+	function dt(e) {
+		e.target === e.currentTarget && it();
 	}
-	function at(e) {
-		(e.metaKey || e.ctrlKey) && e.key === "k" && (e.preventDefault(), i() ? re() : i(!0));
+	function ft(e) {
+		(e.metaKey || e.ctrlKey) && e.key === "k" && (e.preventDefault(), a() ? it() : a(!0));
 	}
-	function ot(e) {
-		return lockBodyScroll(), tick().then(() => {
-			get(C) !== null && get(C).focus();
+	function pt(e) {
+		return ne === null && document.activeElement instanceof HTMLElement && (ne = document.activeElement), lockBodyScroll(), tick().then(() => {
+			get(R) !== null && get(R).focus();
 		}), { destroy() {
-			unlockBodyScroll();
+			unlockBodyScroll(), ne !== null && (ne.focus(), ne = null);
 		} };
 	}
 	onMount(() => {
-		window.addEventListener("keydown", at);
+		window.addEventListener("keydown", ft);
 	}), onDestroy(() => {
-		typeof window < "u" && window.removeEventListener("keydown", at);
+		typeof window < "u" && window.removeEventListener("keydown", ft);
 	});
-	var ct = {
+	var mt = {
 		get items() {
-			return n();
+			return i();
 		},
 		set items(e) {
-			n(e), flushSync();
+			i(e), flushSync();
 		},
 		get open() {
-			return i();
+			return a();
 		},
 		set open(e = !1) {
-			i(e), flushSync();
+			a(e), flushSync();
 		},
 		get placeholder() {
-			return a();
+			return o();
 		},
 		set placeholder(e = "Search commands...") {
-			a(e), flushSync();
+			o(e), flushSync();
 		},
 		get emptyText() {
-			return o();
+			return s();
 		},
 		set emptyText(e = "No results found.") {
-			o(e), flushSync();
+			s(e), flushSync();
 		},
 		get testId() {
-			return s();
+			return c();
 		},
 		set testId(e) {
-			s(e), flushSync();
+			c(e), flushSync();
 		},
 		get itemIcon() {
-			return c();
+			return l();
 		},
 		set itemIcon(e) {
-			c(e), flushSync();
+			l(e), flushSync();
 		},
 		get searchIcon() {
-			return l();
+			return u();
 		},
 		set searchIcon(e) {
-			l(e), flushSync();
+			u(e), flushSync();
 		},
 		get onselect() {
-			return u();
+			return f();
 		},
 		set onselect(e) {
-			u(e), flushSync();
+			f(e), flushSync();
 		},
 		get onclose() {
-			return f();
+			return p();
 		},
 		set onclose(e) {
-			f(e), flushSync();
+			p(e), flushSync();
 		},
 		get classes() {
-			return p();
+			return h();
 		},
 		set classes(e) {
-			p(e), flushSync();
+			h(e), flushSync();
 		}
-	}, lt = comment(), ut = first_child(lt), dt = (e) => {
-		var t = root_9$12(), n = child(t), i = child(n), u = child(i), f = (e) => {
+	}, ht = comment(), gt = first_child(ht), _t = (e) => {
+		var t = root_9$12(), i = child(t), a = child(i), f = child(a), p = (e) => {
 			var t = comment();
-			snippet(first_child(t), l), append(e, t);
-		}, R = (e) => {
+			snippet(first_child(t), u), append(e, t);
+		}, ne = (e) => {
 			var t = root$69();
 			html(t, () => search_default, !0), reset(t), append(e, t);
 		};
-		if_block(u, (e) => {
-			typeof l() == "function" ? e(f) : e(R, -1);
+		if_block(f, (e) => {
+			typeof u() == "function" ? e(p) : e(ne, -1);
 		});
-		var re = sibling(u, 2);
-		remove_input_defaults(re), bind_this(re, (e) => set(C, e), () => get(C)), reset(i);
-		var Me = sibling(i, 4), Ue = child(Me), at = (e) => {
+		var re = sibling(f, 2);
+		remove_input_defaults(re), bind_this(re, (e) => set(R, e), () => get(R)), reset(a);
+		var it = sibling(a, 4), ot = child(it), lt = (e) => {
 			var t = root_1$58(), n = child(t, !0);
-			reset(t), template_effect(() => set_text(n, o())), append(e, t);
-		}, ct = (e) => {
+			reset(t), template_effect(() => set_text(n, s())), append(e, t);
+		}, ut = (e) => {
 			var t = comment();
-			each(first_child(t), 17, () => get(G), ([e, t]) => e, (e, t) => {
-				var n = /* @__PURE__ */ user_derived(() => to_array(get(t), 2));
-				let i = () => get(n)[0], a = () => get(n)[1];
-				var o = root_8$17(), l = first_child(o), u = (e) => {
+			each(first_child(t), 17, () => get(be), ([e, t]) => e, (e, t) => {
+				var i = /* @__PURE__ */ user_derived(() => to_array(get(t), 2));
+				let a = () => get(i)[0], o = () => get(i)[1];
+				var s = root_8$17(), u = first_child(s), f = (e) => {
 					var t = root_2$44(), n = child(t, !0);
-					reset(t), template_effect(() => set_text(n, i())), append(e, t);
+					reset(t), template_effect(() => set_text(n, a())), append(e, t);
 				};
-				if_block(l, (e) => {
-					i() !== "" && e(u);
-				}), each(sibling(l, 2), 17, a, (e) => e.value, (e, t) => {
-					let n = /* @__PURE__ */ user_derived(() => get(ne).get(get(t).value) ?? -1);
-					var i = root_7$19();
-					let a;
-					var o = child(i), l = (e) => {
+				if_block(u, (e) => {
+					a() !== "" && e(f);
+				}), each(sibling(u, 2), 17, o, (e) => e.value, (e, t) => {
+					let i = /* @__PURE__ */ user_derived(() => get(Re).get(get(t).value) ?? -1);
+					var a = root_7$19();
+					let o;
+					var s = child(a), u = (e) => {
 						var n = root_3$39();
-						snippet(child(n), c, () => get(t)), reset(n), append(e, n);
-					}, u = (e) => {
+						snippet(child(n), l, () => get(t)), reset(n), append(e, n);
+					}, f = (e) => {
 						var n = root_4$31();
 						Img(child(n), {
 							inlineSvg: !0,
@@ -8868,42 +8887,42 @@ function CommandMenu(e, t) {
 							alt: ""
 						}), reset(n), append(e, n);
 					};
-					if_block(o, (e) => {
-						typeof c() == "function" ? e(l) : typeof get(t).icon == "string" && get(t).icon.length > 0 && e(u, 1);
+					if_block(s, (e) => {
+						typeof l() == "function" ? e(u) : typeof get(t).icon == "string" && get(t).icon.length > 0 && e(f, 1);
 					});
-					var f = sibling(o, 2), p = child(f, !0);
-					reset(f);
-					var h = sibling(f, 2), C = (e) => {
+					var p = sibling(s, 2), h = child(p, !0);
+					reset(p);
+					var S = sibling(p, 2), C = (e) => {
 						var n = root_6$22();
 						each(n, 21, () => get(t).shortcut.split("+"), index, (e, t) => {
 							var n = root_5$26(), i = child(n, !0);
 							reset(n), template_effect((e) => set_text(i, e), [() => get(t).trim()]), append(e, n);
 						}), reset(n), append(e, n);
 					};
-					if_block(h, (e) => {
+					if_block(S, (e) => {
 						typeof get(t).shortcut == "string" && get(t).shortcut.length > 0 && e(C);
-					}), reset(i), template_effect(() => {
-						a = set_class(i, 1, "command-menu-item svelte-rk55q", null, a, {
-							active: get(n) === get(S),
+					}), reset(a), template_effect(() => {
+						set_attribute(a, "id", `command-menu-option-${n}-${get(i)}`), o = set_class(a, 1, "command-menu-item svelte-rk55q", null, o, {
+							active: get(i) === get(k),
 							disabled: get(t).disabled
-						}), set_attribute(i, "data-active", get(n) === get(S)), set_attribute(i, "aria-selected", get(n) === get(S)), set_attribute(i, "aria-disabled", get(t).disabled), set_attribute(i, "data-pw", typeof s() == "string" ? `${s()}-item-${get(t).value}` : null), set_attribute(i, "testid", typeof s() == "string" ? `${s()}-item-${get(t).value}` : null), set_text(p, get(t).label);
-					}), delegated("click", i, () => be(get(t))), event("mouseenter", i, () => {
-						get(t).disabled || set(S, get(n), !0);
-					}), append(e, i);
-				}), append(e, o);
+						}), set_attribute(a, "data-active", get(i) === get(k)), set_attribute(a, "aria-selected", get(i) === get(k)), set_attribute(a, "aria-disabled", get(t).disabled), set_attribute(a, "data-pw", typeof c() == "string" ? `${c()}-item-${get(t).value}` : null), set_attribute(a, "testid", typeof c() == "string" ? `${c()}-item-${get(t).value}` : null), set_text(h, get(t).label);
+					}), delegated("click", a, () => at(get(t))), event("mouseenter", a, () => {
+						get(t).disabled || set(k, get(i), !0);
+					}), append(e, a);
+				}), append(e, s);
 			}), append(e, t);
 		};
-		if_block(Ue, (e) => {
-			get(te).length === 0 ? e(at) : e(ct, -1);
-		}), reset(Me), bind_this(Me, (e) => set(k, e), () => get(k)), reset(n), reset(t), action(t, (e) => ot?.(e)), template_effect(() => {
-			set_class(t, 1, `command-menu-overlay ${p() ?? "" ?? ""}`, "svelte-rk55q"), set_attribute(t, "data-pw", typeof s() == "string" ? s() : null), set_attribute(t, "testid", typeof s() == "string" ? s() : null), set_attribute(re, "placeholder", a()), set_attribute(re, "data-pw", typeof s() == "string" ? `${s()}-input` : null), set_attribute(re, "testid", typeof s() == "string" ? `${s()}-input` : null);
-		}), delegated("click", t, it), delegated("keydown", t, Re), delegated("input", re, () => {
-			set(S, 0);
-		}), bind_value(re, () => get(h), (e) => set(h, e)), append(e, t);
+		if_block(ot, (e) => {
+			get(Me).length === 0 ? e(lt) : e(ut, -1);
+		}), reset(it), bind_this(it, (e) => set(G, e), () => get(G)), reset(i), bind_this(i, (e) => set(te, e), () => get(te)), reset(t), action(t, (e) => pt?.(e)), template_effect(() => {
+			set_class(t, 1, `command-menu-overlay ${h() ?? "" ?? ""}`, "svelte-rk55q"), set_attribute(t, "data-pw", typeof c() == "string" ? c() : null), set_attribute(t, "testid", typeof c() == "string" ? c() : null), set_attribute(re, "placeholder", o()), set_attribute(re, "aria-expanded", get(Me).length > 0), set_attribute(re, "aria-controls", S), set_attribute(re, "aria-activedescendant", get(Ue)), set_attribute(re, "data-pw", typeof c() == "string" ? `${c()}-input` : null), set_attribute(re, "testid", typeof c() == "string" ? `${c()}-input` : null), set_attribute(it, "id", S);
+		}), delegated("click", t, dt), delegated("keydown", t, ct), delegated("input", re, () => {
+			set(k, 0);
+		}), bind_value(re, () => get(C), (e) => set(C, e)), append(e, t);
 	};
-	return if_block(ut, (e) => {
-		i() && e(dt);
-	}), append(e, lt), pop(ct);
+	return if_block(gt, (e) => {
+		a() && e(_t);
+	}), append(e, ht), pop(mt);
 }
 delegate([
 	"click",
@@ -11010,21 +11029,49 @@ var rest_excludes$57 = new Set([
 	"$$events",
 	"$$legacy",
 	"$$host",
-	"sliderAriaLabel"
+	"sliderAriaLabel",
+	"sliderAriaLabelledby"
 ]);
 function Slider_wc(e, t) {
 	push(t, !0);
-	let n = prop(t, "sliderAriaLabel", 7), i = /* @__PURE__ */ rest_props(t, rest_excludes$57);
-	return Slider(e, spread_props(() => i, { get ariaLabel() {
-		return n();
-	} })), pop({
+	let n = prop(t, "sliderAriaLabel", 7), i = prop(t, "sliderAriaLabelledby", 7), a = /* @__PURE__ */ rest_props(t, rest_excludes$57), o = t.$$host;
+	function s(e) {
+		if (typeof e != "string" || e.trim() === "") return;
+		let t = o.getRootNode();
+		if (!(t instanceof Document) && !(t instanceof ShadowRoot)) return;
+		let n = e.trim().split(/\s+/).map((e) => t.getElementById(e)?.textContent?.trim() ?? "").filter((e) => e !== "").join(" ");
+		if (n !== "") return n;
+	}
+	let c = /* @__PURE__ */ state(void 0);
+	user_effect(() => {
+		set(c, s(i()), !0);
+	});
+	var l = {
 		get sliderAriaLabel() {
 			return n();
 		},
 		set sliderAriaLabel(e) {
 			n(e), flushSync();
+		},
+		get sliderAriaLabelledby() {
+			return i();
+		},
+		set sliderAriaLabelledby(e) {
+			i(e), flushSync();
 		}
-	});
+	};
+	{
+		let t = /* @__PURE__ */ user_derived(() => n() ?? get(c));
+		Slider(e, spread_props(() => a, {
+			get ariaLabel() {
+				return get(t);
+			},
+			get ariaLabelledby() {
+				return i();
+			}
+		}));
+	}
+	return pop(l);
 }
 customElements.define("sui-slider", create_custom_element(Slider_wc, {
 	value: {
@@ -11057,13 +11104,17 @@ customElements.define("sui-slider", create_custom_element(Slider_wc, {
 		type: "String"
 	},
 	classes: { type: "String" },
-	oninput: { type: "Object" },
-	onchange: { type: "Object" },
-	labelFormatter: { type: "Object" },
 	sliderAriaLabel: {
 		attribute: "aria-label",
 		type: "String"
-	}
+	},
+	sliderAriaLabelledby: {
+		attribute: "aria-labelledby",
+		type: "String"
+	},
+	oninput: { type: "Object" },
+	onchange: { type: "Object" },
+	labelFormatter: { type: "Object" }
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/wc/components/SplitInput.wc.svelte
@@ -11334,120 +11385,121 @@ var root$54 = /* @__PURE__ */ from_html("<div class=\"step-icon-container svelte
 	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, #24aa5a);--step-index-container-background-color: var(\n      --step-index-container-completed-background-color,\n      #24aa5a\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, #798fa5cc);\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, #798fa5cc);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 0.8s 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, #798fa5cc);}.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);}"
 };
 function Step(e, t) {
+	let n = props_id();
 	push(t, !0), append_styles$1(e, $$css$54);
-	let n = prop(t, "stepIndex", 7), i = prop(t, "label", 7), a = prop(t, "icon", 7), o = prop(t, "status", 7), s = prop(t, "badge", 7), c = prop(t, "orientation", 7, "horizontal"), l = prop(t, "classes", 7), u = prop(t, "ariaLabel", 7), f = prop(t, "testId", 7), p = prop(t, "suppressRoleAndTabindex", 7), h = prop(t, "onclick", 7), S = prop(t, "onkeydown", 7), C = () => {
-		h()?.({ selectedIndex: n() });
-	}, k = (e) => {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), C()), S()?.(e);
-	}, R = /* @__PURE__ */ user_derived(() => c() === "vertical"), G = /* @__PURE__ */ user_derived(() => [
+	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() });
+	}, G = (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), R()), C()?.(e);
+	}, te = /* @__PURE__ */ user_derived(() => l() === "vertical"), ne = /* @__PURE__ */ user_derived(() => [
 		"step",
-		get(R) ? "step-vertical" : "",
-		l() ?? ""
+		get(te) ? "step-vertical" : "",
+		u() ?? ""
 	].filter((e) => e.length > 0).join(" "));
-	var te = {
+	var re = {
 		get stepIndex() {
-			return n();
+			return i();
 		},
 		set stepIndex(e) {
-			n(e), flushSync();
+			i(e), flushSync();
 		},
 		get label() {
-			return i();
+			return a();
 		},
 		set label(e) {
-			i(e), flushSync();
+			a(e), flushSync();
 		},
 		get icon() {
-			return a();
+			return o();
 		},
 		set icon(e) {
-			a(e), flushSync();
+			o(e), flushSync();
 		},
 		get status() {
-			return o();
+			return s();
 		},
 		set status(e) {
-			o(e), flushSync();
+			s(e), flushSync();
 		},
 		get badge() {
-			return s();
+			return c();
 		},
 		set badge(e) {
-			s(e), flushSync();
+			c(e), flushSync();
 		},
 		get orientation() {
-			return c();
+			return l();
 		},
 		set orientation(e = "horizontal") {
-			c(e), flushSync();
+			l(e), flushSync();
 		},
 		get classes() {
-			return l();
+			return u();
 		},
 		set classes(e) {
-			l(e), flushSync();
+			u(e), flushSync();
 		},
 		get ariaLabel() {
-			return u();
+			return f();
 		},
 		set ariaLabel(e) {
-			u(e), flushSync();
+			f(e), flushSync();
 		},
 		get testId() {
-			return f();
+			return p();
 		},
 		set testId(e) {
-			f(e), flushSync();
+			p(e), flushSync();
 		},
 		get suppressRoleAndTabindex() {
-			return p();
+			return h();
 		},
 		set suppressRoleAndTabindex(e) {
-			p(e), flushSync();
+			h(e), flushSync();
 		},
 		get onclick() {
-			return h();
+			return S();
 		},
 		set onclick(e) {
-			h(e), flushSync();
+			S(e), flushSync();
 		},
 		get onkeydown() {
-			return S();
+			return C();
 		},
 		set onkeydown(e) {
-			S(e), flushSync();
+			C(e), flushSync();
 		}
-	}, ne = root_4$29();
-	let re;
-	var be = child(ne), Me = (e) => {
+	}, be = root_4$29();
+	let Me;
+	var Re = child(be), Ue = (e) => {
 		var t = root$54(), n = child(t);
-		reset(t), template_effect(() => set_attribute(n, "src", a())), append(e, t);
-	}, Re = (e) => {
+		reset(t), template_effect(() => set_attribute(n, "src", o())), append(e, t);
+	}, it = (e) => {
 		append(e, root_1$47());
-	}, Ue = (e) => {
-		var t = root_2$38(), i = child(t), a = child(i, !0);
-		reset(i), reset(t), template_effect(() => set_text(a, n())), append(e, t);
+	}, at = (e) => {
+		var t = root_2$38(), n = child(t), a = child(n, !0);
+		reset(n), reset(t), template_effect(() => set_text(a, i())), append(e, t);
 	};
-	if_block(be, (e) => {
-		typeof a() == "string" && a().length > 0 ? e(Me) : o() === "in-progress" ? e(Re, 1) : e(Ue, -1);
+	if_block(Re, (e) => {
+		typeof o() == "string" && o().length > 0 ? e(Ue) : s() === "in-progress" ? e(it, 1) : e(at, -1);
 	});
-	var it = sibling(be, 2), at = child(it, !0);
-	reset(it);
-	var ot = sibling(it, 2), ct = (e) => {
+	var ot = sibling(Re, 2), ct = child(ot, !0);
+	reset(ot);
+	var lt = sibling(ot, 2), ut = (e) => {
 		var t = root_3$35();
-		snippet(child(t), s), reset(t), append(e, t);
+		snippet(child(t), c), reset(t), append(e, t);
 	};
-	return if_block(ot, (e) => {
-		typeof s() == "function" && e(ct);
-	}), next(2), reset(ne), template_effect(() => {
-		re = set_class(ne, 1, clsx(get(G)), "svelte-z5hug7", re, {
-			"status-completed": o() === "completed",
-			"status-active": o() === "active",
-			"status-failure": o() === "failure",
-			"status-in-progress": o() === "in-progress",
-			"status-muted": o() === "muted"
-		}), set_attribute(ne, "data-pw", typeof f() == "string" ? f() : null), set_attribute(ne, "testid", typeof f() == "string" ? f() : null), set_attribute(ne, "role", p() ? null : "button"), set_attribute(ne, "tabindex", p() ? null : 0), set_attribute(ne, "aria-label", u() ?? null), set_attribute(ne, "aria-labelledby", u() ? null : `step-label-${n()}`), set_attribute(ne, "aria-current", o() === "active" ? "step" : null), set_attribute(it, "id", `step-label-${n() ?? ""}`), set_text(at, i());
-	}), delegated("click", ne, C), delegated("keydown", ne, k), append(e, ne), pop(te);
+	return if_block(lt, (e) => {
+		typeof c() == "function" && e(ut);
+	}), next(2), reset(be), template_effect(() => {
+		Me = set_class(be, 1, clsx(get(ne)), "svelte-z5hug7", Me, {
+			"status-completed": s() === "completed",
+			"status-active": s() === "active",
+			"status-failure": s() === "failure",
+			"status-in-progress": s() === "in-progress",
+			"status-muted": s() === "muted"
+		}), set_attribute(be, "data-pw", typeof p() == "string" ? p() : null), set_attribute(be, "testid", typeof p() == "string" ? p() : null), set_attribute(be, "role", h() ? null : "button"), set_attribute(be, "tabindex", h() ? null : 0), set_attribute(be, "aria-label", f() ?? null), set_attribute(be, "aria-labelledby", f() ? null : k), set_attribute(be, "aria-current", s() === "active" ? "step" : null), set_attribute(ot, "id", k), set_text(ct, a());
+	}), delegated("click", be, R), delegated("keydown", be, G), append(e, be), pop(re);
 }
 delegate(["click", "keydown"]), create_custom_element(Step, {
 	stepIndex: {},
@@ -14133,81 +14185,93 @@ delegate(["click"]), customElements.define("sui-file-input", create_custom_eleme
 }, ["trigger"], [], { mode: "open" }));
 //#endregion
 //#region src/lib/ContextMenu/ContextMenu.svelte
-var root$40 = /* @__PURE__ */ from_html("<div class=\"context-menu-separator svelte-1hf60pq\" role=\"separator\"></div>"), root_1$36 = /* @__PURE__ */ from_html("<img class=\"context-menu-item-icon svelte-1hf60pq\" alt=\"\"/>"), root_2$30 = /* @__PURE__ */ from_html("<span class=\"context-menu-item-shortcut svelte-1hf60pq\"> </span>"), root_3$28 = /* @__PURE__ */ from_html("<div role=\"menuitem\"><!> <span class=\"context-menu-item-label svelte-1hf60pq\"> </span> <!></div>"), root_4$24 = /* @__PURE__ */ from_html("<div class=\"context-menu-dropdown svelte-1hf60pq\" role=\"menu\" tabindex=\"-1\"></div>"), root_5$22 = /* @__PURE__ */ from_html("<div role=\"application\"><!></div> <!>", 1), $$css$41 = {
+var root$40 = /* @__PURE__ */ from_html("<div class=\"context-menu-separator svelte-1hf60pq\" role=\"separator\"></div>"), root_1$36 = /* @__PURE__ */ from_html("<img class=\"context-menu-item-icon svelte-1hf60pq\" alt=\"\"/>"), root_2$30 = /* @__PURE__ */ from_html("<span class=\"context-menu-item-shortcut svelte-1hf60pq\"> </span>"), root_3$28 = /* @__PURE__ */ from_html("<div role=\"menuitem\"><!> <span class=\"context-menu-item-label svelte-1hf60pq\"> </span> <!></div>"), root_4$24 = /* @__PURE__ */ from_html("<div class=\"context-menu-dropdown svelte-1hf60pq\" role=\"menu\" tabindex=\"-1\"></div>"), root_5$22 = /* @__PURE__ */ from_html("<div><!></div> <!>", 1), $$css$41 = {
 	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$41);
-	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__ */ user_derived(() => n().filter((e) => !e.separator && !e.disabled));
-	function G(e, t) {
-		set(C, e, !0), set(k, t, !0), i(!0), set(S, 0), l()?.(), requestAnimationFrame(() => {
-			re(), be(0);
+	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), G = /* @__PURE__ */ user_derived(() => n().filter((e) => !e.separator && !e.disabled)), te = null;
+	function ne() {
+		te !== null && (cancelAnimationFrame(te), te = null);
+	}
+	function re(e, t) {
+		set(C, e, !0), set(k, t, !0), i(!0), set(S, 0), l()?.(), ne(), te = requestAnimationFrame(() => {
+			te = null, Re(), Ue(0);
 		});
 	}
-	function te() {
-		i(!1), set(S, -1), u()?.();
+	function be() {
+		ne(), i(!1), set(S, -1), u()?.();
+		let e = get(R);
+		if (set(R, null), e === null) return;
+		let t = document.activeElement;
+		(t === null || t === document.body || (get(p)?.contains(t) ?? !1)) && e.focus();
 	}
-	function ne(e) {
-		e.disabled || (c()?.(e), te());
+	function Me(e) {
+		e.disabled || (c()?.(e), be());
 	}
-	function re() {
+	function Re() {
 		if (get(p) === null) return;
 		let e = get(p).getBoundingClientRect(), t = window.innerWidth, n = window.innerHeight;
 		get(C) + e.width > t && set(C, t - e.width - 4), get(k) + e.height > n && set(k, n - e.height - 4), get(C) < 0 && set(C, 4), get(k) < 0 && set(k, 4);
 	}
-	function be(e) {
+	function Ue(e) {
 		if (get(p) === null) return;
 		let t = get(p).querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])");
 		e >= 0 && e < t.length && t[e].focus();
 	}
-	function Me(e) {
-		return get(R).indexOf(e);
+	function it(e) {
+		return get(G).indexOf(e);
 	}
-	function Re(e) {
-		e.preventDefault(), G(e.clientX, e.clientY);
+	function at(e) {
+		e.preventDefault();
+		let t = document.activeElement;
+		set(R, t instanceof HTMLElement && t !== document.body ? t : null, !0), re(e.clientX, e.clientY);
 	}
-	function Ue(e) {
+	function ot(e) {
 		switch (e.key) {
 			case "ArrowDown": {
 				e.preventDefault();
 				let t = get(S) + 1;
-				set(S, t >= get(R).length ? 0 : t, !0), be(get(S));
+				set(S, t >= get(G).length ? 0 : t, !0), Ue(get(S));
 				break;
 			}
 			case "ArrowUp": {
 				e.preventDefault();
 				let t = get(S) - 1;
-				set(S, t < 0 ? get(R).length - 1 : t, !0), be(get(S));
+				set(S, t < 0 ? get(G).length - 1 : t, !0), Ue(get(S));
 				break;
 			}
 			case "Home":
-				e.preventDefault(), set(S, 0), be(get(S));
+				e.preventDefault(), set(S, 0), Ue(get(S));
 				break;
 			case "End":
-				e.preventDefault(), set(S, get(R).length - 1), be(get(S));
+				e.preventDefault(), set(S, get(G).length - 1), Ue(get(S));
 				break;
 			case "Enter":
 			case " ":
-				e.preventDefault(), get(S) >= 0 && get(S) < get(R).length && ne(get(R)[get(S)]);
+				e.preventDefault(), get(S) >= 0 && get(S) < get(G).length && Me(get(G)[get(S)]);
 				break;
 			case "Escape":
-				e.preventDefault(), te();
+				e.preventDefault(), be();
 				break;
 			case "Tab":
-				te();
+				be();
 				break;
 		}
 	}
-	function it(e) {
-		e.target instanceof Node && get(p) && !get(p).contains(e.target) && te();
+	function ct(e) {
+		e.target instanceof Node && get(p) && !get(p).contains(e.target) && be();
+	}
+	function lt(e) {
+		i() && e.key === "Escape" && (e.preventDefault(), be());
 	}
 	onMount(() => {
-		document.addEventListener("click", it);
+		document.addEventListener("click", ct), document.addEventListener("keydown", lt);
 	}), onDestroy(() => {
-		typeof window < "u" && document.removeEventListener("click", it);
+		typeof window < "u" && (document.removeEventListener("click", ct), document.removeEventListener("keydown", lt));
 	});
-	var at = {
+	var ut = {
 		get items() {
 			return n();
 		},
@@ -14262,14 +14326,22 @@ function ContextMenu(e, t) {
 		set classes(e) {
 			f(e), flushSync();
 		}
-	}, ot = root_5$22(), ct = first_child(ot), lt = child(ct), ut = (e) => {
+	}, dt = root_5$22(), ft = first_child(dt);
+	attribute_effect(ft, () => ({
+		class: `context-menu-container ${f() ?? "" ?? ""}`,
+		oncontextmenu: at,
+		...i() ? { role: "application" } : {},
+		"data-pw": o(),
+		testID: o()
+	}), void 0, void 0, void 0, "svelte-1hf60pq");
+	var pt = child(ft), mt = (e) => {
 		var t = comment();
 		snippet(first_child(t), s), append(e, t);
 	};
-	if_block(lt, (e) => {
-		typeof s() == "function" && e(ut);
-	}), reset(ct), bind_this(ct, (e) => set(h, e), () => get(h));
-	var dt = sibling(ct, 2), ft = (e) => {
+	if_block(pt, (e) => {
+		typeof s() == "function" && e(mt);
+	}), reset(ft), bind_this(ft, (e) => set(h, e), () => get(h));
+	var ht = sibling(ft, 2), gt = (e) => {
 		var t = root_4$24();
 		each(t, 21, n, (e) => e.value, (e, t) => {
 			var n = comment(), i = first_child(n), a = (e) => {
@@ -14297,28 +14369,22 @@ function ContextMenu(e, t) {
 						"context-menu-item-danger": get(t).danger,
 						"context-menu-item-disabled": get(t).disabled
 					}), set_attribute(n, "tabindex", get(t).disabled ? -1 : 0), set_attribute(n, "aria-disabled", get(t).disabled ? "true" : null), set_attribute(n, "data-pw", o() ? `${o()}-item-${get(t).value}` : null), set_attribute(n, "testid", o() ? `${o()}-item-${get(t).value}` : null), set_text(l, get(t).label);
-				}), delegated("click", n, () => ne(get(t))), delegated("keydown", n, (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), ne(get(t)));
+				}), delegated("click", n, () => Me(get(t))), delegated("keydown", n, (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), Me(get(t)));
 				}), event("focus", n, () => {
-					get(t).disabled || set(S, Me(get(t)), !0);
+					get(t).disabled || set(S, it(get(t)), !0);
 				}), append(e, n);
 			};
 			if_block(i, (e) => {
 				get(t).separator ? e(a) : e(s, -1);
 			}), append(e, n);
-		}), reset(t), bind_this(t, (e) => set(p, e), () => get(p)), template_effect(() => set_style(t, `left: ${get(C) ?? ""}px; top: ${get(k) ?? ""}px; --context-menu-max-height: ${a() ?? ""};`)), delegated("keydown", t, Ue), append(e, t);
+		}), reset(t), bind_this(t, (e) => set(p, e), () => get(p)), template_effect(() => set_style(t, `left: ${get(C) ?? ""}px; top: ${get(k) ?? ""}px; --context-menu-max-height: ${a() ?? ""};`)), delegated("keydown", t, ot), append(e, t);
 	};
-	return if_block(dt, (e) => {
-		i() && e(ft);
-	}), template_effect(() => {
-		set_class(ct, 1, `context-menu-container ${f() ?? "" ?? ""}`, "svelte-1hf60pq"), set_attribute(ct, "data-pw", o()), set_attribute(ct, "testid", o());
-	}), delegated("contextmenu", ct, Re), append(e, ot), pop(at);
+	return if_block(ht, (e) => {
+		i() && e(gt);
+	}), append(e, dt), pop(ut);
 }
-delegate([
-	"contextmenu",
-	"keydown",
-	"click"
-]), create_custom_element(ContextMenu, {
+delegate(["keydown", "click"]), create_custom_element(ContextMenu, {
 	items: {},
 	open: {},
 	maxHeight: {},
@@ -17996,14 +18062,14 @@ var chevron_down_sm_default = "<svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6
 };
 function SplitButton(e, t) {
 	push(t, !0), append_styles$1(e, $$css$31);
-	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, "onclick", 7), u = prop(t, "onselect", 7), f = /* @__PURE__ */ state(!1);
-	function p(e) {
-		a() || l()?.(e);
+	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);
 	}
-	function h(e) {
-		u()?.(e);
+	function C(e) {
+		f()?.(e);
 	}
-	var S = {
+	var k = {
 		get text() {
 			return n();
 		},
@@ -18040,41 +18106,50 @@ function SplitButton(e, t) {
 		set classes(e) {
 			c(e), flushSync();
 		},
-		get onclick() {
+		get triggerAriaLabel() {
 			return l();
 		},
-		set onclick(e) {
+		set triggerAriaLabel(e) {
 			l(e), flushSync();
 		},
-		get onselect() {
+		get onclick() {
 			return u();
 		},
-		set onselect(e) {
+		set onclick(e) {
 			u(e), flushSync();
+		},
+		get onselect() {
+			return f();
+		},
+		set onselect(e) {
+			f(e), flushSync();
 		}
-	}, C = root_1$26();
-	let k;
-	var R = child(C);
-	Button(child(R), {
+	}, R = root_1$26();
+	let G;
+	var te = child(R);
+	Button(child(te), {
 		get text() {
 			return n();
 		},
-		onclick: p,
+		onclick: S,
 		get disabled() {
 			return a();
 		}
-	}), reset(R);
-	var G = sibling(R, 2);
-	return Menu(child(G), {
+	}), reset(te);
+	var ne = sibling(te, 2);
+	return Menu(child(ne), {
 		get items() {
 			return i();
 		},
-		onselect: h,
+		get triggerAriaLabel() {
+			return get(h);
+		},
+		onselect: C,
 		get open() {
-			return get(f);
+			return get(p);
 		},
 		set open(e) {
-			set(f, e, !0);
+			set(p, e, !0);
 		},
 		trigger: (e) => {
 			var t = root$29(), n = child(t), i = (e) => {
@@ -18089,9 +18164,9 @@ function SplitButton(e, t) {
 			}), reset(t), append(e, t);
 		},
 		$$slots: { trigger: !0 }
-	}), reset(G), reset(C), template_effect(() => {
-		k = set_class(C, 1, `split-button ${c() ?? "" ?? ""}`, "svelte-2cti", k, { disabled: a() }), set_attribute(C, "data-pw", typeof o() == "string" ? o() : null), set_attribute(C, "testid", typeof o() == "string" ? o() : null);
-	}), append(e, C), pop(S);
+	}), reset(ne), reset(R), template_effect(() => {
+		G = set_class(R, 1, `split-button ${c() ?? "" ?? ""}`, "svelte-2cti", G, { disabled: a() }), set_attribute(R, "data-pw", typeof o() == "string" ? o() : null), set_attribute(R, "testid", typeof o() == "string" ? o() : null);
+	}), append(e, R), pop(k);
 }
 create_custom_element(SplitButton, {
 	text: {},
@@ -18100,6 +18175,7 @@ create_custom_element(SplitButton, {
 	testId: {},
 	dropdownIcon: {},
 	classes: {},
+	triggerAriaLabel: {},
 	onclick: {},
 	onselect: {}
 }, [], [], { mode: "open" });
@@ -18136,6 +18212,10 @@ customElements.define("sui-split-button", create_custom_element(SplitButton_wc,
 		type: "String"
 	},
 	classes: { type: "String" },
+	triggerAriaLabel: {
+		attribute: "trigger-aria-label",
+		type: "String"
+	},
 	onclick: { type: "Object" },
 	onselect: { type: "Object" },
 	dropdownIcon: { type: "Object" }
@@ -18812,23 +18892,23 @@ function BuiltinCell(e, t) {
 			});
 			var f = sibling(c, 2), p = (e) => {
 				{
-					let i = (e) => {
-						var t = root_23$3(), n = child(t);
+					let i = (e, t = noop) => {
+						var n = root_23$3(), i = child(n);
 						{
 							let e = (e) => {
 								var t = root_22$3();
 								html(t, () => dots_vertical_default, !0), reset(t), append(e, t);
-							}, t = /* @__PURE__ */ user_derived(() => u("menuTrigger", a()));
-							Button(n, {
+							}, n = /* @__PURE__ */ user_derived(() => u("menuTrigger", a()));
+							Button(i, spread_props(t, {
 								ariaLabel: "More actions",
 								get testId() {
-									return get(t);
+									return get(n);
 								},
 								icon: e,
 								$$slots: { icon: !0 }
-							});
+							}));
 						}
-						reset(t), append(e, t);
+						reset(n), append(e, n);
 					}, c = /* @__PURE__ */ user_derived(() => get(t).menuItems.map((e) => ({
 						value: e.id,
 						label: e.label ?? e.id,
@@ -18845,6 +18925,7 @@ function BuiltinCell(e, t) {
 						get usePortal() {
 							return s();
 						},
+						interactiveTrigger: !0,
 						onselect: (e) => n().onMenuAction?.(a(), e.value, o()),
 						trigger: i,
 						$$slots: { trigger: !0 }
@@ -18866,25 +18947,25 @@ function BuiltinCell(e, t) {
 		var c = comment(), l = first_child(c), f = (e) => {
 			var i = root_18$4(), c = child(i);
 			{
-				let e = (e) => {
-					var n = root_23$3(), i = child(n);
+				let e = (e, n = noop) => {
+					var i = root_23$3(), o = child(i);
 					{
 						let e = (e) => {
 							var t = root_22$3();
 							html(t, () => dots_vertical_default, !0), reset(t), append(e, t);
-						}, n = /* @__PURE__ */ user_derived(() => get(t).ariaLabel ?? "More actions"), o = /* @__PURE__ */ user_derived(() => u("popupTrigger", a()));
-						Button(i, {
+						}, i = /* @__PURE__ */ user_derived(() => get(t).ariaLabel ?? "More actions"), s = /* @__PURE__ */ user_derived(() => u("popupTrigger", a()));
+						Button(o, spread_props(n, {
 							get ariaLabel() {
-								return get(n);
+								return get(i);
 							},
 							get testId() {
-								return get(o);
+								return get(s);
 							},
 							icon: e,
 							$$slots: { icon: !0 }
-						});
+						}));
 					}
-					reset(n), append(e, n);
+					reset(i), append(e, i);
 				}, i = /* @__PURE__ */ user_derived(() => get(t).items.map((e) => ({
 					value: e.id,
 					label: e.label ?? e.id,
@@ -18901,6 +18982,7 @@ function BuiltinCell(e, t) {
 					get usePortal() {
 						return s();
 					},
+					interactiveTrigger: !0,
 					onselect: (e) => n().onMenuAction?.(a(), e.value, o()),
 					trigger: e,
 					$$slots: { trigger: !0 }
@@ -19444,16 +19526,16 @@ function Table(e, t) {
 				let n = /* @__PURE__ */ user_derived(() => get(i).filter);
 				var a = root_11$6(), o = child(a);
 				{
-					let e = (e) => {
-						var a = root_10$7();
-						let o;
-						var s = child(a);
+					let e = (e, a = noop) => {
+						var o = root_10$7();
+						let s;
+						var c = child(o);
 						{
 							let e = (e) => {
 								var t = root_9$8();
 								html(t, () => chevron_down_sm_default, !0), reset(t), append(e, t);
 							}, n = /* @__PURE__ */ user_derived(() => get(i).testId && `${get(i).testId}-filter-trigger`);
-							Button(s, {
+							Button(c, spread_props(a, {
 								get ariaLabel() {
 									return `Filter by ${get(t) ?? ""}`;
 								},
@@ -19462,9 +19544,9 @@ function Table(e, t) {
 								},
 								icon: e,
 								$$slots: { icon: !0 }
-							});
+							}));
 						}
-						reset(a), template_effect(() => o = set_class(a, 1, "table-header-filter-trigger svelte-171ci2i", null, o, { "table-header-filter-active": typeof get(n).selectedValue == "string" })), append(e, a);
+						reset(o), template_effect(() => s = set_class(o, 1, "table-header-filter-trigger svelte-171ci2i", null, s, { "table-header-filter-active": typeof get(n).selectedValue == "string" })), append(e, o);
 					}, a = /* @__PURE__ */ user_derived(() => get(n).options.map((e) => ({
 						value: e.value,
 						label: e.label
@@ -19477,6 +19559,7 @@ function Table(e, t) {
 							return get(s);
 						},
 						role: "listbox",
+						interactiveTrigger: !0,
 						get testId() {
 							return get(c);
 						},