@juspay/svelte-ui-components 3.1.2 → 3.1.3

package/dist/Accordion/Accordion.svelte

@@ -20,6 +20,10 @@
      the panel from elsewhere too. */
   const uid = $props.id();
   const effectivePanelId = $derived(panelId ?? `accordion-panel-${uid}`);
+  /* The trigger id comes from the same per-instance uid, not from effectivePanelId: a caller
+     assigning `panelId` after mount must move the panel's id, not rename the trigger, so the
+     control's id stays stable for assistive technology and anything else referencing it. */
+  const triggerId = `accordion-trigger-${uid}`;
 
   function handleTriggerClick(): void {
     if (disabled) {
@@ -34,6 +38,7 @@
   <div
     class="accordion-trigger {triggerClasses ?? ''}"
     class:disabled
+    id={triggerId}
     role="button"
     tabindex={disabled ? -1 : 0}
     aria-expanded={expand}
@@ -53,6 +58,8 @@
 
 <div
   id={effectivePanelId}
+  role={trigger ? 'region' : null}
+  aria-labelledby={trigger ? triggerId : null}
   class="accordion {classes ?? ''}"
   class:expanded={expand}
   data-pw={typeof testId === 'string' ? testId : null}

package/dist/Carousel/Carousel.svelte

@@ -180,7 +180,7 @@
       <!-- eslint-disable-next-line -->
       {#each views as _, index}
         <div
-          class={activeSlideIndex == index ? 'active-dot' : 'dot'}
+          class={activeSlideIndex === index ? 'active-dot' : 'dot'}
           onclick={() => moveSlideToIndex(index)}
           onkeydown={(event) => {
             if (event.key === 'Enter' || event.key === ' ') {
@@ -192,6 +192,7 @@
           role="button"
           tabindex="0"
           aria-label={`Go to slide ${index + 1}`}
+          aria-current={activeSlideIndex === index ? 'true' : null}
           data-pw={typeof dotTestId === 'string' ? `${dotTestId}-${index + 1}` : null}
           testID={typeof dotTestId === 'string' ? `${dotTestId}-${index + 1}` : null}
         ></div>

package/dist/Input/Input.svelte

@@ -321,7 +321,7 @@
         aria-controls={ariaControls}
         aria-activedescendant={ariaActivedescendant}
         aria-required={mandatory || null}
-        aria-invalid={showError ? 'true' : null}
+        aria-invalid={showError && !actionInput ? 'true' : null}
         aria-describedby={describedBy || null}
         required={mandatory || null}
         onfocus={onFocus}
@@ -359,7 +359,7 @@
         aria-controls={ariaControls}
         aria-activedescendant={ariaActivedescendant}
         aria-required={mandatory || null}
-        aria-invalid={showError ? 'true' : null}
+        aria-invalid={showError && !actionInput ? 'true' : null}
         aria-describedby={describedBy || null}
         required={mandatory || null}
         onfocus={onFocus}

package/dist/ListItem/ListItem.svelte

@@ -72,7 +72,7 @@
       {onkeydown}
       role={suppressRoleAndTabindex ? null : (itemRole ?? 'button')}
       tabindex={suppressRoleAndTabindex ? null : itemRole === 'option' ? -1 : 0}
-      aria-selected={ariaSelected}
+      aria-selected={suppressRoleAndTabindex ? null : ariaSelected}
       {id}
       data-pw={testId}
       testID={testId}

package/dist/Status/Status.svelte

@@ -31,7 +31,11 @@
         <Img inlineSvg src={statusIcon} alt="status" />
       {/if}
     </div>
-    <svelte:element this={statusTextTag} class="status-text">{statusText}</svelte:element>
+    <svelte:element
+      this={statusTextTag}
+      class="status-text"
+      class:status-text-default={statusTextTag === 'div'}>{statusText}</svelte:element
+    >
     <div class="status-description">
       {#if typeof descriptionSnippet === 'function'}
         {@render descriptionSnippet()}
@@ -51,9 +55,15 @@
 
 <style>
   .status-text {
+    margin-bottom: 8px;
+  }
+
+  /* The weight and colour defaults belong to the plain div only. When a consumer asks for a
+     heading tag (statusTextTag h1-h6) the whole point is that the application's own heading
+     typography applies, so those two declarations must not sit on the element and win. */
+  .status-text-default {
     font-weight: var(--status-font-weight, 600);
     color: var(--status-description-font-color, #2f3841);
-    margin-bottom: 8px;
   }
 
   .status-description {

package/dist/TypewriterText/TypewriterText.svelte

@@ -28,6 +28,19 @@
   let revealedWordCount = $state(0);
 
   const WHITESPACE_CHARACTERS = new Set([' ', '\n']);
+
+  // The bulk-reveal path below discloses text without typing it, so the running whitespace
+  // count has to be rebuilt from the text itself or a later continuation would resume from a
+  // count that never saw the revealed suffix.
+  const countWhitespace = (value: string): number => {
+    let count = 0;
+    for (const character of value) {
+      if (WHITESPACE_CHARACTERS.has(character)) {
+        count += 1;
+      }
+    }
+    return count;
+  };
   const PUNCTUATION_CHARACTERS = new Set([',', '.', '?', '!']);
   const DIGIT_PATTERN = /\d/;
 
@@ -126,6 +139,7 @@
       const hadRemainingText = currentIndex < text.length;
       displayedText = text;
       currentIndex = text.length;
+      revealedWordCount = countWhitespace(text);
       if (hadRemainingText) {
         onProgress?.({ index: currentIndex, total: text.length, displayedText });
       }

package/dist/utils.js

@@ -304,11 +304,15 @@ export function createDebouncer(delay) {
  * Callers must pair every lock with exactly one unlock.
  */
 let bodyScrollLockCount = 0;
+// Whatever inline overflow the host page had set before the first lock, so the last unlock
+// hands it back instead of clearing it: a host running `overflow: clip` on its body keeps it.
+let bodyScrollPreviousOverflow = '';
 export function lockBodyScroll() {
     if (typeof document === 'undefined') {
         return;
     }
     if (bodyScrollLockCount === 0) {
+        bodyScrollPreviousOverflow = document.body.style.overflow;
         document.body.style.overflow = 'hidden';
     }
     bodyScrollLockCount += 1;
@@ -319,6 +323,7 @@ export function unlockBodyScroll() {
     }
     bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
     if (bodyScrollLockCount === 0) {
-        document.body.style.overflow = '';
+        document.body.style.overflow = bodyScrollPreviousOverflow;
+        bodyScrollPreviousOverflow = '';
     }
 }

package/dist-wc/index.js

@@ -5553,7 +5553,7 @@ function Carousel(e, t) {
 		each(t, 21, n, index, (e, t, n) => {
 			var i = root_2$50();
 			set_attribute(i, "aria-label", `Go to slide ${n + 1}`), template_effect(() => {
-				set_class(i, 1, clsx(get(re) == n ? "active-dot" : "dot"), "svelte-vk4ljo"), set_attribute(i, "data-pw", typeof p() == "string" ? `${p()}-${n + 1}` : null), set_attribute(i, "testid", typeof p() == "string" ? `${p()}-${n + 1}` : null);
+				set_class(i, 1, clsx(get(re) === n ? "active-dot" : "dot"), "svelte-vk4ljo"), set_attribute(i, "aria-current", get(re) === n ? "true" : null), set_attribute(i, "data-pw", typeof p() == "string" ? `${p()}-${n + 1}` : null), set_attribute(i, "testid", typeof p() == "string" ? `${p()}-${n + 1}` : null);
 			}), delegated("click", i, () => it(n)), delegated("keydown", i, (e) => {
 				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), it(n)), c()?.(e);
 			}), append(e, i);
@@ -5967,12 +5967,12 @@ function createDebouncer(e) {
 		a - t > e && (t = a, n(...i));
 	};
 }
-var bodyScrollLockCount = 0;
+var bodyScrollLockCount = 0, bodyScrollPreviousOverflow = "";
 function lockBodyScroll() {
-	typeof document > "u" || (bodyScrollLockCount === 0 && (document.body.style.overflow = "hidden"), bodyScrollLockCount += 1);
+	typeof document > "u" || (bodyScrollLockCount === 0 && (bodyScrollPreviousOverflow = document.body.style.overflow, document.body.style.overflow = "hidden"), bodyScrollLockCount += 1);
 }
 function unlockBodyScroll() {
-	typeof document > "u" || (bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1), bodyScrollLockCount === 0 && (document.body.style.overflow = ""));
+	typeof document > "u" || (bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1), bodyScrollLockCount === 0 && (document.body.style.overflow = bodyScrollPreviousOverflow, bodyScrollPreviousOverflow = ""));
 }
 //#endregion
 //#region src/lib/Input/Input.svelte
@@ -6406,7 +6406,7 @@ function Input(e, t) {
 				remove_textarea_child(t);
 				let n, s;
 				bind_this(t, (e) => set(Zt, e), () => get(Zt)), template_effect(() => {
-					set_attribute(t, "id", get(zt)), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(Bt) ? null : yt() ?? null), set_attribute(t, "autocomplete", Me()), set_attribute(t, "inputmode", Re()), set_attribute(t, "name", Ue()), set_attribute(t, "role", vt()), set_attribute(t, "aria-expanded", bt()), set_attribute(t, "aria-autocomplete", xt()), set_attribute(t, "aria-controls", St()), set_attribute(t, "aria-activedescendant", Ct()), set_attribute(t, "aria-required", At() || null), set_attribute(t, "aria-invalid", get(en) ? "true" : null), set_attribute(t, "aria-describedby", get(on) || null), t.required = At() || null, set_attribute(t, "data-pw", at()), set_attribute(t, "testid", at()), n = set_style(t, `--focus-border: ${+!!k()}px;`, n, { resize: get(dn) }), set_attribute(t, "rows", Mt() ?? null), t.disabled = f(), t.readOnly = p() || null, set_attribute(t, "spellcheck", h()), set_attribute(t, "maxlength", o() === "tel" ? null : R()), set_attribute(t, "minlength", G()), s = set_class(t, 1, "svelte-1h0c2oe", null, s, { "action-input": re() });
+					set_attribute(t, "id", get(zt)), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(Bt) ? null : yt() ?? null), set_attribute(t, "autocomplete", Me()), set_attribute(t, "inputmode", Re()), set_attribute(t, "name", Ue()), set_attribute(t, "role", vt()), set_attribute(t, "aria-expanded", bt()), set_attribute(t, "aria-autocomplete", xt()), set_attribute(t, "aria-controls", St()), set_attribute(t, "aria-activedescendant", Ct()), set_attribute(t, "aria-required", At() || null), set_attribute(t, "aria-invalid", get(en) && !re() ? "true" : null), set_attribute(t, "aria-describedby", get(on) || null), t.required = At() || null, set_attribute(t, "data-pw", at()), set_attribute(t, "testid", at()), n = set_style(t, `--focus-border: ${+!!k()}px;`, n, { resize: get(dn) }), set_attribute(t, "rows", Mt() ?? null), t.disabled = f(), t.readOnly = p() || null, set_attribute(t, "spellcheck", h()), set_attribute(t, "maxlength", o() === "tel" ? null : R()), set_attribute(t, "minlength", G()), s = set_class(t, 1, "svelte-1h0c2oe", null, s, { "action-input": re() });
 				}), event("focus", t, function(...e) {
 					lt()?.apply(this, e);
 				}), delegated("focusout", t, gn), delegated("input", t, pn), event("paste", t, mn), delegated("click", t, function(...e) {
@@ -6419,7 +6419,7 @@ function Input(e, t) {
 				remove_input_defaults(t);
 				let n;
 				bind_this(t, (e) => set(Zt, e), () => get(Zt)), template_effect(() => {
-					set_attribute(t, "id", get(zt)), set_attribute(t, "type", o()), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(Bt) ? null : yt() ?? null), set_attribute(t, "autocomplete", Me()), set_attribute(t, "inputmode", Re()), set_attribute(t, "name", Ue()), set_attribute(t, "role", vt()), set_attribute(t, "aria-expanded", bt()), set_attribute(t, "aria-autocomplete", xt()), set_attribute(t, "aria-controls", St()), set_attribute(t, "aria-activedescendant", Ct()), set_attribute(t, "aria-required", At() || null), set_attribute(t, "aria-invalid", get(en) ? "true" : null), set_attribute(t, "aria-describedby", get(on) || null), t.required = At() || null, set_attribute(t, "data-pw", at()), set_attribute(t, "testid", at()), t.disabled = f(), t.readOnly = p() || null, set_attribute(t, "spellcheck", h()), set_attribute(t, "maxlength", o() === "tel" ? null : R()), set_attribute(t, "minlength", G()), set_attribute(t, "min", te()), set_attribute(t, "max", ne()), n = set_class(t, 1, "svelte-1h0c2oe", null, n, { "action-input": re() });
+					set_attribute(t, "id", get(zt)), set_attribute(t, "type", o()), set_value(t, i()), set_attribute(t, "placeholder", a()), set_attribute(t, "aria-label", get(Bt) ? null : yt() ?? null), set_attribute(t, "autocomplete", Me()), set_attribute(t, "inputmode", Re()), set_attribute(t, "name", Ue()), set_attribute(t, "role", vt()), set_attribute(t, "aria-expanded", bt()), set_attribute(t, "aria-autocomplete", xt()), set_attribute(t, "aria-controls", St()), set_attribute(t, "aria-activedescendant", Ct()), set_attribute(t, "aria-required", At() || null), set_attribute(t, "aria-invalid", get(en) && !re() ? "true" : null), set_attribute(t, "aria-describedby", get(on) || null), t.required = At() || null, set_attribute(t, "data-pw", at()), set_attribute(t, "testid", at()), t.disabled = f(), t.readOnly = p() || null, set_attribute(t, "spellcheck", h()), set_attribute(t, "maxlength", o() === "tel" ? null : R()), set_attribute(t, "minlength", G()), set_attribute(t, "min", te()), set_attribute(t, "max", ne()), n = set_class(t, 1, "svelte-1h0c2oe", null, n, { "action-input": re() });
 				}), event("focus", t, function(...e) {
 					lt()?.apply(this, e);
 				}), delegated("focusout", t, gn), delegated("input", t, pn), event("paste", t, mn), delegated("click", t, function(...e) {
@@ -6970,6 +6970,10 @@ customElements.define("sui-chip-input", create_custom_element(ChipInput_wc, {
 		reflect: !0,
 		type: "Boolean"
 	},
+	editable: {
+		reflect: !0,
+		type: "Boolean"
+	},
 	testId: {
 		attribute: "test-id",
 		type: "String"
@@ -6977,6 +6981,7 @@ customElements.define("sui-chip-input", create_custom_element(ChipInput_wc, {
 	classes: { type: "String" },
 	onadd: { type: "Object" },
 	ondismiss: { type: "Object" },
+	onedit: { type: "Object" },
 	onchange: { type: "Object" }
 }, [], [], { mode: "open" }));
 //#endregion
@@ -10716,7 +10721,7 @@ customElements.define("sui-split-input", create_custom_element(SplitInput_wc, {
 //#region src/lib/Status/Status.svelte
 var root$55 = /* @__PURE__ */ from_html("<div><div class=\"order-status svelte-19qpx1s\"><div class=\"status-image svelte-19qpx1s\"><!></div> <!> <div class=\"status-description svelte-19qpx1s\"><!></div> <!> <!></div></div>"), $$css$53 = {
 	hash: "svelte-19qpx1s",
-	code: ".status-text.svelte-19qpx1s {font-weight:var(--status-font-weight, 600);color:var(--status-description-font-color, #2f3841);margin-bottom:8px;}.status-description.svelte-19qpx1s {font-weight:var(--status-font-weight, 400);color:var(--status-description-font-color, #436484cc);padding:0px 42px;margin-bottom:25px;}.status-image.svelte-19qpx1s {color:var(--status-icon-color, inherit);display:flex;margin-bottom:25px;}.background.svelte-19qpx1s {min-height:var(--status-min-height, 100vh);display:flex;justify-content:center;align-items:center;}.order-status.svelte-19qpx1s {flex-direction:column;display:flex;font-family:var(--order-font, inherit);font-size:var(--order-font-size, 14px);text-align:center;}\n  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {.order-status.svelte-19qpx1s {background-color:var(--status-panel-background, rgba(255, 255, 255, 0.6));-webkit-backdrop-filter:var(--status-panel-backdrop-filter, blur(60px));backdrop-filter:var(--status-panel-backdrop-filter, blur(60px));}\n  }"
+	code: ".status-text.svelte-19qpx1s {margin-bottom:8px;}\n\n  /* The weight and colour defaults belong to the plain div only. When a consumer asks for a\n     heading tag (statusTextTag h1-h6) the whole point is that the application's own heading\n     typography applies, so those two declarations must not sit on the element and win. */.status-text-default.svelte-19qpx1s {font-weight:var(--status-font-weight, 600);color:var(--status-description-font-color, #2f3841);}.status-description.svelte-19qpx1s {font-weight:var(--status-font-weight, 400);color:var(--status-description-font-color, #436484cc);padding:0px 42px;margin-bottom:25px;}.status-image.svelte-19qpx1s {color:var(--status-icon-color, inherit);display:flex;margin-bottom:25px;}.background.svelte-19qpx1s {min-height:var(--status-min-height, 100vh);display:flex;justify-content:center;align-items:center;}.order-status.svelte-19qpx1s {flex-direction:column;display:flex;font-family:var(--order-font, inherit);font-size:var(--order-font-size, 14px);text-align:center;}\n  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {.order-status.svelte-19qpx1s {background-color:var(--status-panel-background, rgba(255, 255, 255, 0.6));-webkit-backdrop-filter:var(--status-panel-backdrop-filter, blur(60px));backdrop-filter:var(--status-panel-backdrop-filter, blur(60px));}\n  }"
 };
 function Status(e, t) {
 	push(t, !0), append_styles$1(e, $$css$53);
@@ -10805,9 +10810,10 @@ function Status(e, t) {
 	}), reset(R);
 	var re = sibling(R, 2);
 	element(re, a, !1, (e, t) => {
-		set_class(e, 0, "status-text svelte-19qpx1s");
-		var n = text();
-		template_effect(() => set_text(n, i())), append(t, n);
+		let n;
+		template_effect(() => n = set_class(e, 0, "status-text svelte-19qpx1s", null, n, { "status-text-default": a() === "div" }));
+		var o = text();
+		template_effect(() => set_text(o, i())), append(t, o);
 	});
 	var be = sibling(re, 2), Me = child(be), Re = (e) => {
 		var t = comment();
@@ -10878,6 +10884,11 @@ customElements.define("sui-status", create_custom_element(Status_wc, {
 		reflect: !0,
 		type: "String"
 	},
+	statusTextTag: {
+		attribute: "status-text-tag",
+		reflect: !0,
+		type: "String"
+	},
 	buttonProperties: { type: "Object" },
 	classes: { type: "String" },
 	onbuttonClick: { type: "Object" }
@@ -11825,11 +11836,11 @@ var root$49 = /* @__PURE__ */ from_html("<div role=\"button\"><!></div>"), root_
 function Accordion(e, t) {
 	let n = props_id();
 	push(t, !0), append_styles$1(e, $$css$47);
-	let i = prop(t, "expand", 15, !1), a = prop(t, "children", 7), o = prop(t, "trigger", 7), s = prop(t, "ontoggle", 7), c = prop(t, "triggerClasses", 7), l = prop(t, "classes", 7), u = prop(t, "testId", 7), f = prop(t, "disabled", 7, !1), p = prop(t, "panelId", 7), h = /* @__PURE__ */ user_derived(() => p() ?? `accordion-panel-${n}`);
-	function S() {
+	let i = prop(t, "expand", 15, !1), a = prop(t, "children", 7), o = prop(t, "trigger", 7), s = prop(t, "ontoggle", 7), c = prop(t, "triggerClasses", 7), l = prop(t, "classes", 7), u = prop(t, "testId", 7), f = prop(t, "disabled", 7, !1), p = prop(t, "panelId", 7), h = /* @__PURE__ */ user_derived(() => p() ?? `accordion-panel-${n}`), S = `accordion-trigger-${n}`;
+	function C() {
 		f() || (i(!i()), s()?.(i()));
 	}
-	var C = {
+	var k = {
 		get expand() {
 			return i();
 		},
@@ -11884,24 +11895,24 @@ function Accordion(e, t) {
 		set panelId(e) {
 			p(e), flushSync();
 		}
-	}, k = root_1$42(), R = first_child(k), G = (e) => {
+	}, R = root_1$42(), G = first_child(R), te = (e) => {
 		var t = root$49();
 		let n;
 		snippet(child(t), o, () => ({ expanded: i() })), reset(t), template_effect(() => {
-			n = set_class(t, 1, `accordion-trigger ${c() ?? "" ?? ""}`, "svelte-1p9ezsm", n, { disabled: f() }), set_attribute(t, "tabindex", f() ? -1 : 0), set_attribute(t, "aria-expanded", i()), set_attribute(t, "aria-controls", get(h)), set_attribute(t, "aria-disabled", f());
-		}), delegated("click", t, S), delegated("keydown", t, (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), S());
+			n = set_class(t, 1, `accordion-trigger ${c() ?? "" ?? ""}`, "svelte-1p9ezsm", n, { disabled: f() }), set_attribute(t, "id", S), set_attribute(t, "tabindex", f() ? -1 : 0), set_attribute(t, "aria-expanded", i()), set_attribute(t, "aria-controls", get(h)), set_attribute(t, "aria-disabled", f());
+		}), delegated("click", t, C), delegated("keydown", t, (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), C());
 		}), append(e, t);
 	};
-	if_block(R, (e) => {
-		o() && e(G);
+	if_block(G, (e) => {
+		o() && e(te);
 	});
-	var te = sibling(R, 2);
-	let ne;
-	var re = child(te);
-	return snippet(child(re), () => a() ?? noop), reset(re), reset(te), template_effect(() => {
-		set_attribute(te, "id", get(h)), ne = set_class(te, 1, `accordion ${l() ?? "" ?? ""}`, "svelte-1p9ezsm", ne, { expanded: i() }), set_attribute(te, "data-pw", typeof u() == "string" ? u() : null), set_attribute(te, "testid", typeof u() == "string" ? u() : null);
-	}), append(e, k), pop(C);
+	var ne = sibling(G, 2);
+	let re;
+	var be = child(ne);
+	return snippet(child(be), () => a() ?? noop), reset(be), reset(ne), template_effect(() => {
+		set_attribute(ne, "id", get(h)), set_attribute(ne, "role", o() ? "region" : null), set_attribute(ne, "aria-labelledby", o() ? S : null), re = set_class(ne, 1, `accordion ${l() ?? "" ?? ""}`, "svelte-1p9ezsm", re, { expanded: i() }), set_attribute(ne, "data-pw", typeof u() == "string" ? u() : null), set_attribute(ne, "testid", typeof u() == "string" ? u() : null);
+	}), append(e, R), pop(k);
 }
 delegate(["click", "keydown"]), create_custom_element(Accordion, {
 	expand: {},
@@ -14214,7 +14225,7 @@ function ListItem(e, t) {
 		if_block(Bt, (e) => {
 			typeof be() == "function" && s() && e(Ht);
 		}), reset(zt), reset(Ue), reset(t), template_effect(() => {
-			set_class(t, 1, `item-container ${ct() ?? "" ?? ""}`, "svelte-d2pqbq"), it = set_class(Ue, 1, "item svelte-d2pqbq", null, it, { "prevent-focus": R() }), set_attribute(Ue, "role", G() ? null : ut() ?? "button"), set_attribute(Ue, "tabindex", G() ? null : ut() === "option" ? -1 : 0), set_attribute(Ue, "aria-selected", dt()), set_attribute(Ue, "id", ft()), set_attribute(Ue, "data-pw", l()), set_attribute(Ue, "testid", l()), vt = set_class(at, 1, "top-section svelte-d2pqbq", null, vt, { "prevent-focus": R() }), set_attribute(at, "role", G() ? null : "button"), set_attribute(at, "tabindex", G() ? null : 0), set_attribute(at, "data-pw", u()), set_attribute(at, "testid", u());
+			set_class(t, 1, `item-container ${ct() ?? "" ?? ""}`, "svelte-d2pqbq"), it = set_class(Ue, 1, "item svelte-d2pqbq", null, it, { "prevent-focus": R() }), set_attribute(Ue, "role", G() ? null : ut() ?? "button"), set_attribute(Ue, "tabindex", G() ? null : ut() === "option" ? -1 : 0), set_attribute(Ue, "aria-selected", G() ? null : dt()), set_attribute(Ue, "id", ft()), set_attribute(Ue, "data-pw", l()), set_attribute(Ue, "testid", l()), vt = set_class(at, 1, "top-section svelte-d2pqbq", null, vt, { "prevent-focus": R() }), set_attribute(at, "role", G() ? null : "button"), set_attribute(at, "tabindex", G() ? null : 0), set_attribute(at, "data-pw", u()), set_attribute(at, "testid", u());
 		}), delegated("click", Ue, gt), delegated("keydown", Ue, function(...e) {
 			ot()?.apply(this, e);
 		}), delegated("click", at, _t), delegated("keydown", at, function(...e) {

package/package.json

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