@juspay/svelte-ui-components 4.9.2 → 4.10.0

package/dist/CommandMenu/CommandMenu.svelte

@@ -19,10 +19,19 @@
     classes
   }: CommandMenuProperties = $props();
 
+  // Stable per-instance ids keep ARIA references distinct across menus.
+  const uid = $props.id();
+  const listboxId = `command-menu-listbox-${uid}`;
+
   let query = $state('');
   let activeIndex = $state(0);
   let inputElement: HTMLInputElement | null = $state(null);
   let listElement: HTMLDivElement | null = $state(null);
+  let dialogElement: HTMLDivElement | null = $state(null);
+  // Captured when the dialog opens, consumed once it unmounts — mirrors
+  // Gallery.svelte's lightboxAction so focus returns to whatever opened the
+  // command menu instead of falling back to <body>.
+  let openerElement: HTMLElement | null = null;
 
   let filteredItems = $derived.by(() => {
     if (query.trim() === '') {
@@ -68,6 +77,13 @@
     return map;
   });
 
+  // aria-activedescendant must point at the id of the highlighted option, which
+  // is keyed by its flat index (see the option's own id below) — null once the
+  // list is empty, since there is then no option to describe.
+  let activeDescendantId = $derived(
+    flatItems.length > 0 ? `command-menu-option-${uid}-${activeIndex}` : null
+  );
+
   function close() {
     open = false;
     query = '';
@@ -132,9 +148,47 @@
         close();
         break;
       }
+      case 'Tab': {
+        // aria-modal="true" promises focus stays inside, so Tab cycles rather
+        // than escaping. Cycle over whatever is actually tabbable instead of
+        // pinning to the input: today the input is the only tab stop (options
+        // are tabindex="-1" and are reached with arrows), so the two are
+        // equivalent — but pinning would silently break the moment the dialog
+        // gains a second tab stop, such as a close button.
+        const tabbable = tabbableElements();
+        if (tabbable.length === 0) {
+          break;
+        }
+        event.preventDefault();
+        const active = document.activeElement;
+        const current = active instanceof HTMLElement ? tabbable.indexOf(active) : -1;
+        const step = event.shiftKey ? -1 : 1;
+        const next = (current + step + tabbable.length) % tabbable.length;
+        tabbable.at(next)?.focus();
+        break;
+      }
     }
   }
 
+  // Everything inside the dialog that Tab would normally reach. `tabindex="-1"`
+  // is excluded because those are arrow-key targets, not tab stops.
+  function tabbableElements(): HTMLElement[] {
+    if (dialogElement === null) {
+      return [];
+    }
+    const candidates = dialogElement.querySelectorAll<HTMLElement>(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]'
+    );
+    return [...candidates].filter(
+      (el) =>
+        // The options are real <button>s held out of the tab order with
+        // tabindex="-1"; they are arrow-key targets. Excluding -1 only in the
+        // `[tabindex]` selector would still match them as buttons.
+        el.getAttribute('tabindex') !== '-1' &&
+        (el.offsetParent !== null || el === document.activeElement)
+    );
+  }
+
   async function scrollActiveIntoView() {
     await tick();
     if (listElement !== null) {
@@ -167,6 +221,9 @@
   // onDestroy below must NOT unlock as well: with a shared reference count a second
   // decrement would release a lock another open surface still needs.
   function scrollLockAction(_node: HTMLElement) {
+    if (openerElement === null && document.activeElement instanceof HTMLElement) {
+      openerElement = document.activeElement;
+    }
     lockBodyScroll();
     tick().then(() => {
       if (inputElement !== null) {
@@ -176,6 +233,10 @@
     return {
       destroy() {
         unlockBodyScroll();
+        if (openerElement !== null) {
+          openerElement.focus();
+          openerElement = null;
+        }
       }
     };
   }
@@ -204,7 +265,7 @@
     data-pw={typeof testId === 'string' ? testId : null}
     testID={typeof testId === 'string' ? testId : null}
   >
-    <div class="command-menu-dialog">
+    <div class="command-menu-dialog" bind:this={dialogElement}>
       <div class="command-menu-input-wrapper">
         {#if typeof searchIcon === 'function'}
           {@render searchIcon()}
@@ -223,6 +284,11 @@
           {placeholder}
           autocomplete="off"
           spellcheck="false"
+          role="combobox"
+          aria-expanded={flatItems.length > 0}
+          aria-controls={listboxId}
+          aria-autocomplete="list"
+          aria-activedescendant={activeDescendantId}
           data-pw={typeof testId === 'string' ? `${testId}-input` : null}
           testID={typeof testId === 'string' ? `${testId}-input` : null}
         />
@@ -230,7 +296,7 @@
 
       <div class="command-menu-separator"></div>
 
-      <div class="command-menu-list" bind:this={listElement} role="listbox">
+      <div class="command-menu-list" bind:this={listElement} id={listboxId} role="listbox">
         {#if flatItems.length === 0}
           <div class="command-menu-empty">
             {emptyText}
@@ -244,6 +310,7 @@
               {@const index = flatIndexLookup.get(item.value) ?? -1}
               <button
                 type="button"
+                id={`command-menu-option-${uid}-${index}`}
                 class="command-menu-item"
                 class:active={index === activeIndex}
                 class:disabled={item.disabled}

package/dist/ContextMenu/ContextMenu.svelte

@@ -19,27 +19,66 @@
   let focusedIndex: number = $state(-1);
   let posX: number = $state(0);
   let posY: number = $state(0);
+  // Captured when the menu opens, consumed once on close — the element that had
+  // focus (or triggered the native contextmenu event) is where focus belongs once
+  // the menu goes away, matching Menu.svelte's own restore-on-close contract.
+  let openerElement: HTMLElement | null = $state(null);
 
   let selectableItems: ContextMenuItem[] = $derived(
     items.filter((item) => !item.separator && !item.disabled)
   );
 
+  // The frame that moves focus into the freshly-opened menu, kept so closing can
+  // cancel it. Escape pressed between the right-click and that frame used to
+  // leave the callback queued: it ran after the menu was gone, moved focus onto
+  // an item that no longer existed, and left the page with nothing focused at
+  // all — worse than never restoring, because the user's place is simply lost.
+  let openFrame: number | null = null;
+
+  function cancelOpenFrame() {
+    if (openFrame !== null) {
+      cancelAnimationFrame(openFrame);
+      openFrame = null;
+    }
+  }
+
   function openMenu(x: number, y: number) {
     posX = x;
     posY = y;
     open = true;
     focusedIndex = 0;
     onopen?.();
-    requestAnimationFrame(() => {
+    cancelOpenFrame();
+    openFrame = requestAnimationFrame(() => {
+      openFrame = null;
       adjustPosition();
       focusItem(0);
     });
   }
 
   function close() {
+    cancelOpenFrame();
     open = false;
     focusedIndex = -1;
     onclose?.();
+
+    const opener = openerElement;
+    openerElement = null;
+    if (opener === null) {
+      return;
+    }
+
+    // Only take focus back if nothing else has claimed it. Closing by clicking a
+    // focusable element outside means the browser has already moved focus there,
+    // and pulling it back to the opener would fight the user and lose their
+    // place. Focus still inside the dying menu, or fallen to <body>, is loose and
+    // does belong to the opener.
+    const active = document.activeElement;
+    const focusIsLoose =
+      active === null || active === document.body || (menuEl?.contains(active) ?? false);
+    if (focusIsLoose) {
+      opener.focus();
+    }
   }
 
   function selectMenuItem(item: ContextMenuItem) {
@@ -90,6 +129,12 @@
 
   function handleContextMenu(event: MouseEvent) {
     event.preventDefault();
+    // A right-click usually leaves <body> as the active element, and "restore
+    // focus to <body>" is not a restoration — it is the same as doing nothing,
+    // but it also discards whatever the browser would have done. Capture only a
+    // real element.
+    const active = document.activeElement;
+    openerElement = active instanceof HTMLElement && active !== document.body ? active : null;
     openMenu(event.clientX, event.clientY);
   }
 
@@ -147,13 +192,28 @@
     }
   }
 
+  // Escape is handled on the document as well as on the menu, because for one
+  // frame after the right-click the menu is open but focus has not moved into it
+  // yet. A menu-only handler does nothing during that window: the keystroke is
+  // swallowed, the menu stays open, and the pending frame then pulls focus into
+  // it — so a quick Escape appeared to do the opposite of what it asked for. An
+  // open menu should close on Escape wherever focus happens to be.
+  function handleDocumentKeydown(event: KeyboardEvent) {
+    if (open && event.key === 'Escape') {
+      event.preventDefault();
+      close();
+    }
+  }
+
   onMount(() => {
     document.addEventListener('click', handleClickOutside);
+    document.addEventListener('keydown', handleDocumentKeydown);
   });
 
   onDestroy(() => {
     if (typeof window !== 'undefined') {
       document.removeEventListener('click', handleClickOutside);
+      document.removeEventListener('keydown', handleDocumentKeydown);
     }
   });
 </script>
@@ -162,7 +222,7 @@
   class="context-menu-container {classes ?? ''}"
   bind:this={containerEl}
   oncontextmenu={handleContextMenu}
-  role="application"
+  {...open ? { role: 'application' } : {}}
   data-pw={testId}
   testID={testId}
 >

package/dist/Slider/Slider.svelte

@@ -10,6 +10,7 @@
     showValue = false,
     labelFormatter,
     ariaLabel,
+    ariaLabelledby,
     testId,
     onchange,
     oninput,
@@ -44,6 +45,7 @@
     {value}
     {disabled}
     aria-label={typeof ariaLabel === 'string' ? ariaLabel : null}
+    aria-labelledby={typeof ariaLabel === 'string' ? null : (ariaLabelledby ?? null)}
     data-pw={typeof testId === 'string' ? testId : null}
     testID={typeof testId === 'string' ? testId : null}
     oninput={handleInput}

package/dist/Slider/properties.d.ts

@@ -14,6 +14,13 @@ export type OptionalSliderProperties = {
      * so a control whose purpose is not carried by adjacent visible text needs this.
      */
     ariaLabel?: string;
+    /**
+     * Ids of the elements that name the range input (aria-labelledby). Use this
+     * instead of `ariaLabel` when the name is already on screen, so the two cannot
+     * drift apart. `ariaLabel` wins if both are given, matching how the platform
+     * resolves them.
+     */
+    ariaLabelledby?: string;
     testId?: string;
     classes?: string;
 };

package/dist/Stepper/Step.svelte

@@ -16,6 +16,12 @@
     onkeydown
   }: StepProperties = $props();
 
+  // Per-instance, because `step-label-${stepIndex}` collides across two Steppers
+  // on one page and `aria-labelledby` then resolves to whichever matching id
+  // comes first in the document — naming a step after a different Stepper's.
+  const uid = $props.id();
+  const labelId = `step-label-${uid}`;
+
   const handleStepClick = (): void => {
     onclick?.({ selectedIndex: stepIndex });
   };
@@ -59,7 +65,7 @@
   role={suppressRoleAndTabindex ? null : 'button'}
   tabindex={suppressRoleAndTabindex ? null : 0}
   aria-label={ariaLabel ?? null}
-  aria-labelledby={ariaLabel ? null : `step-label-${stepIndex}`}
+  aria-labelledby={ariaLabel ? null : labelId}
   aria-current={status === 'active' ? 'step' : null}
 >
   {#if typeof icon === 'string' && icon.length > 0}
@@ -99,7 +105,7 @@
     </div>
   {/if}
 
-  <div class="step-text" id="step-label-{stepIndex}">
+  <div class="step-text" id={labelId}>
     {label}
   </div>
 

package/dist-wc/index.js

@@ -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: {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "4.9.2",
+  "version": "4.10.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",