@juspay/svelte-ui-components 2.136.8 → 2.136.10

package/dist/Accordion/Accordion.svelte

@@ -9,9 +9,18 @@
     triggerClasses,
     classes,
     testId,
-    disabled = false
+    disabled = false,
+    panelId
   }: AccordionProperties = $props();
 
+  /* The trigger and the panel are siblings, not ancestor/descendant, so nothing in the
+     markup tells assistive technology which region the trigger's aria-expanded refers to.
+     A generated id keeps that link automatic -- consumers pass no id and get correct
+     wiring -- while `panelId` lets a caller supply their own when they need to reference
+     the panel from elsewhere too. */
+  const uid = $props.id();
+  const effectivePanelId = $derived(panelId ?? `accordion-panel-${uid}`);
+
   function handleTriggerClick(): void {
     if (disabled) {
       return;
@@ -28,6 +37,7 @@
     role="button"
     tabindex={disabled ? -1 : 0}
     aria-expanded={expand}
+    aria-controls={effectivePanelId}
     aria-disabled={disabled}
     onclick={handleTriggerClick}
     onkeydown={(event) => {
@@ -42,6 +52,7 @@
 {/if}
 
 <div
+  id={effectivePanelId}
   class="accordion {classes ?? ''}"
   class:expanded={expand}
   data-pw={typeof testId === 'string' ? testId : null}

package/dist/Accordion/properties.d.ts

@@ -17,6 +17,13 @@ export type OptionalAccordionProperties = {
      * can be shown open or closed under external (controlled) state.
      */
     disabled?: boolean;
+    /**
+     * `id` for the collapsible panel, which the built-in trigger references via
+     * `aria-controls`. Defaults to a generated, per-instance id, so the trigger and
+     * panel are always linked without any caller involvement. Supply one only when
+     * something else needs to reference the panel by a known id.
+     */
+    panelId?: string;
 };
 export type AccordionEventProperties = {
     ontoggle?: (expanded: boolean) => void;

package/dist/SplitInput/SplitInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import Input from '../Input/Input.svelte';
   import type { FieldConfig, SplitInputProperties } from './properties';
 
@@ -37,6 +38,31 @@
     return values.at(index) ?? '';
   }
 
+  /**
+   * Writes the resolved state back onto the DOM element.
+   *
+   * Needed because the element can hold a value the state never had. Typing
+   * into a filled field produces a two-character string in the DOM, and when
+   * the character we resolve out of it happens to equal what was already
+   * stored -- overtyping 2 with another 2 -- the assignment is a no-op, Svelte
+   * sees no change, and nothing re-renders. The field is then left displaying
+   * "22" indefinitely while the state says "2".
+   */
+  async function syncFieldElement(index: number) {
+    // After the pending render, not before it: writing during the input handler
+    // is undone when Svelte flushes, and when the resolved value is unchanged
+    // there is no flush to piggyback on -- so the correction has to come last.
+    await tick();
+    const element = inputRefs.at(index)?.getInputRef();
+    if (element === null || typeof element === 'undefined') {
+      return;
+    }
+    const resolved = getFieldValue(index);
+    if (element.value !== resolved) {
+      element.value = resolved;
+    }
+  }
+
   function commitValues() {
     const filled = values.filter((v) => v.length > 0);
     oninput?.([...values]);
@@ -104,7 +130,19 @@
       } else {
         // Overtyping an already-filled field: keep the newest character and
         // advance, mirroring single-char entry.
-        values[index] = chars.slice(-1);
+        //
+        // Which character is "newest" cannot be assumed to be the last one.
+        // The browser inserts at the caret, and where the caret sits after a
+        // click on a filled single-character field is platform-dependent:
+        // Chromium on macOS puts it after the character, Chromium on Linux
+        // before it. So typing 7 into a field holding 2 yields "27" on one and
+        // "72" on the other, and slice(-1) silently picks the *old* digit on
+        // Linux. Removing one occurrence of the previous value identifies the
+        // newly typed character wherever it landed.
+        const previous = getFieldValue(index);
+        const remainder = previous.length === 1 ? chars.replace(previous, '') : '';
+        values[index] = remainder.length > 0 ? remainder.slice(-1) : chars.slice(-1);
+        void syncFieldElement(index);
         if (index < fieldCount - 1) {
           focusField(index + 1);
         }

package/dist-wc/index.js

@@ -7050,62 +7050,72 @@ function SplitInput(e, t) {
 	function R(e) {
 		return n().at(e) ?? "";
 	}
-	function G() {
+	async function G(e) {
+		await tick();
+		let t = get(k).at(e)?.getInputRef();
+		if (t == null) return;
+		let n = R(e);
+		t.value !== n && (t.value = n);
+	}
+	function te() {
 		let e = n().filter((e) => e.length > 0);
 		p()?.([...n()]), f()?.([...n()]), e.length === get(S) && h()?.([...n()]);
 	}
-	function te(e) {
+	function ne(e) {
 		e >= 0 && e < get(S) && get(k).at(e)?.focus();
 	}
-	function ne(e, t) {
+	function re(e, t) {
 		return (e.dataType ?? "text") === "tel" ? t.replace(/\D/g, "") : t.replace(/\s/g, "");
 	}
-	function re(e) {
+	function be(e) {
 		let t = e.maxLength ?? 1e3;
 		return s() && t === 1 ? get(S) : t;
 	}
-	function be(e, t) {
+	function Me(e, t) {
 		let i = get(C).at(e);
 		if (i === void 0) return;
 		let a = i.maxLength ?? 1e3;
 		if (s() && a === 1 && t.length > 1) {
-			let a = ne(i, t);
+			let a = re(i, t);
 			if (a.length === 0) n(n()[e] = "", !0);
 			else if (e === 0 || a.length >= get(S)) {
 				for (let e = 0; e < Math.min(a.length, get(S)); e++) n(n()[e] = a.charAt(e), !0);
-				te(Math.min(a.length, get(S)) - 1);
-			} else n(n()[e] = a.slice(-1), !0), e < get(S) - 1 && te(e + 1);
-		} else n(n()[e] = t, !0), s() && a === 1 && t.length > 0 && e < get(S) - 1 && te(e + 1);
-		G();
-	}
-	function Me(e, t) {
-		e.key === "Backspace" ? R(t).length === 0 && t > 0 && (n(n()[t - 1] = "", !0), te(t - 1), G()) : e.key === "ArrowLeft" && t > 0 ? te(t - 1) : e.key === "ArrowRight" && t < get(S) - 1 ? te(t + 1) : e.key === "Tab" && (e.shiftKey && t > 0 ? (e.preventDefault(), te(t - 1)) : e.shiftKey === !1 && t < get(S) - 1 && (e.preventDefault(), te(t + 1)));
+				ne(Math.min(a.length, get(S)) - 1);
+			} else {
+				let t = R(e), i = t.length === 1 ? a.replace(t, "") : "";
+				n(n()[e] = i.length > 0 ? i.slice(-1) : a.slice(-1), !0), G(e), e < get(S) - 1 && ne(e + 1);
+			}
+		} else n(n()[e] = t, !0), s() && a === 1 && t.length > 0 && e < get(S) - 1 && ne(e + 1);
+		te();
 	}
 	function Re(e, t) {
+		e.key === "Backspace" ? R(t).length === 0 && t > 0 && (n(n()[t - 1] = "", !0), ne(t - 1), te()) : e.key === "ArrowLeft" && t > 0 ? ne(t - 1) : e.key === "ArrowRight" && t < get(S) - 1 ? ne(t + 1) : e.key === "Tab" && (e.shiftKey && t > 0 ? (e.preventDefault(), ne(t - 1)) : e.shiftKey === !1 && t < get(S) - 1 && (e.preventDefault(), ne(t + 1)));
+	}
+	function Ue(e, t) {
 		if (e.clipboardData === null) return;
 		e.preventDefault();
 		let i = e.clipboardData.getData("text").trim(), a = get(C).at(t);
 		if (s() && a !== void 0) {
-			let e = ne(a, i);
+			let e = re(a, i);
 			for (let i = t; i < get(S); i++) {
 				let a = i - t;
 				if (a >= e.length) break;
 				n(n()[i] = e.charAt(a), !0);
 			}
-			te(Math.min(t + e.length, get(S)) - 1);
+			ne(Math.min(t + e.length, get(S)) - 1);
 		} else n(n()[t] = i, !0);
-		G();
+		te();
 	}
-	function Ue() {
+	function it() {
 		for (let e = 0; e < get(S); e++) n(n()[e] = "", !0);
-		p()?.([...n()]), f()?.([...n()]), te(0);
+		p()?.([...n()]), f()?.([...n()]), ne(0);
 	}
-	function it() {
-		te(0);
+	function at() {
+		ne(0);
 	}
-	var at = {
-		clear: Ue,
-		focus: it,
+	var ot = {
+		clear: it,
+		focus: at,
 		get values() {
 			return n();
 		},
@@ -7172,8 +7182,8 @@ function SplitInput(e, t) {
 		set oncomplete(e) {
 			h(e), flushSync();
 		}
-	}, ot = root_3$41();
-	return each(ot, 21, () => get(C), index, (e, t, n) => {
+	}, ct = root_3$41();
+	return each(ct, 21, () => get(C), index, (e, t, n) => {
 		var i = root_2$46(), a = first_child(i), s = (e) => {
 			var t = root$72(), n = child(t, !0);
 			reset(t), template_effect(() => set_text(n, c())), append(e, t);
@@ -7183,7 +7193,7 @@ function SplitInput(e, t) {
 		});
 		var l = sibling(a, 2), u = child(l);
 		{
-			let e = /* @__PURE__ */ user_derived(() => R(n)), i = /* @__PURE__ */ user_derived(() => get(t).dataType ?? "text"), a = /* @__PURE__ */ user_derived(() => re(get(t))), s = /* @__PURE__ */ user_derived(() => get(t).validationPattern ?? null), c = /* @__PURE__ */ user_derived(() => get(t).validators ?? []), l = /* @__PURE__ */ user_derived(() => get(t).autoComplete ?? "on");
+			let e = /* @__PURE__ */ user_derived(() => R(n)), i = /* @__PURE__ */ user_derived(() => get(t).dataType ?? "text"), a = /* @__PURE__ */ user_derived(() => be(get(t))), s = /* @__PURE__ */ user_derived(() => get(t).validationPattern ?? null), c = /* @__PURE__ */ user_derived(() => get(t).validators ?? []), l = /* @__PURE__ */ user_derived(() => get(t).autoComplete ?? "on");
 			bind_this(Input(u, {
 				get value() {
 					return get(e);
@@ -7223,9 +7233,9 @@ function SplitInput(e, t) {
 				},
 				actionInput: !0,
 				classes: "field-group-input",
-				onInput: (e) => be(n, e),
-				onKeyDown: (e) => Me(e, n),
-				onPaste: (e) => Re(e, n)
+				onInput: (e) => Me(n, e),
+				onKeyDown: (e) => Re(e, n),
+				onPaste: (e) => Ue(e, n)
 			}), (e, t) => get(k)[t] = e, (e) => get(k)?.[e], () => [n]);
 		}
 		var f = sibling(u, 2), p = (e) => {
@@ -7235,9 +7245,9 @@ function SplitInput(e, t) {
 		if_block(f, (e) => {
 			typeof get(t).label == "string" && e(p);
 		}), reset(l), append(e, i);
-	}), reset(ot), template_effect(() => {
-		set_class(ot, 1, `field-group ${u() ?? "" ?? ""}`, "svelte-1gcz5cs"), set_attribute(ot, "data-pw", l()), set_attribute(ot, "testid", l());
-	}), append(e, ot), pop(at);
+	}), reset(ct), template_effect(() => {
+		set_class(ct, 1, `field-group ${u() ?? "" ?? ""}`, "svelte-1gcz5cs"), set_attribute(ct, "data-pw", l()), set_attribute(ct, "testid", l());
+	}), append(e, ct), pop(ot);
 }
 create_custom_element(SplitInput, {
 	values: {},
@@ -11760,78 +11770,85 @@ var root$49 = /* @__PURE__ */ from_html("<div role=\"button\"><!></div>"), root_
 	code: ".accordion-trigger.svelte-1p9ezsm {cursor:var(--accordion-trigger-cursor, pointer);}.accordion-trigger.disabled.svelte-1p9ezsm {cursor:var(--accordion-trigger-disabled-cursor, not-allowed);}.accordion.svelte-1p9ezsm {display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--accordion-transition, 0.2s ease-out);}.accordion.expanded.svelte-1p9ezsm {grid-template-rows:1fr;}.accordion-content.svelte-1p9ezsm {min-height:0;}"
 };
 function Accordion(e, t) {
+	let n = props_id();
 	push(t, !0), append_styles$1(e, $$css$47);
-	let n = prop(t, "expand", 15, !1), i = prop(t, "children", 7), a = prop(t, "trigger", 7), o = prop(t, "ontoggle", 7), s = prop(t, "triggerClasses", 7), c = prop(t, "classes", 7), l = prop(t, "testId", 7), u = prop(t, "disabled", 7, !1);
-	function f() {
-		u() || (n(!n()), o()?.(n()));
+	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() {
+		f() || (i(!i()), s()?.(i()));
 	}
-	var p = {
+	var C = {
 		get expand() {
-			return n();
+			return i();
 		},
 		set expand(e = !1) {
-			n(e), flushSync();
+			i(e), flushSync();
 		},
 		get children() {
-			return i();
+			return a();
 		},
 		set children(e) {
-			i(e), flushSync();
+			a(e), flushSync();
 		},
 		get trigger() {
-			return a();
+			return o();
 		},
 		set trigger(e) {
-			a(e), flushSync();
+			o(e), flushSync();
 		},
 		get ontoggle() {
-			return o();
+			return s();
 		},
 		set ontoggle(e) {
-			o(e), flushSync();
+			s(e), flushSync();
 		},
 		get triggerClasses() {
-			return s();
+			return c();
 		},
 		set triggerClasses(e) {
-			s(e), flushSync();
+			c(e), flushSync();
 		},
 		get classes() {
-			return c();
+			return l();
 		},
 		set classes(e) {
-			c(e), flushSync();
+			l(e), flushSync();
 		},
 		get testId() {
-			return l();
+			return u();
 		},
 		set testId(e) {
-			l(e), flushSync();
+			u(e), flushSync();
 		},
 		get disabled() {
-			return u();
+			return f();
 		},
 		set disabled(e = !1) {
-			u(e), flushSync();
+			f(e), flushSync();
+		},
+		get panelId() {
+			return p();
+		},
+		set panelId(e) {
+			p(e), flushSync();
 		}
-	}, h = root_1$42(), S = first_child(h), C = (e) => {
+	}, k = root_1$42(), R = first_child(k), G = (e) => {
 		var t = root$49();
-		let i;
-		snippet(child(t), a, () => ({ expanded: n() })), reset(t), template_effect(() => {
-			i = set_class(t, 1, `accordion-trigger ${s() ?? "" ?? ""}`, "svelte-1p9ezsm", i, { disabled: u() }), set_attribute(t, "tabindex", u() ? -1 : 0), set_attribute(t, "aria-expanded", n()), set_attribute(t, "aria-disabled", u());
-		}), delegated("click", t, f), delegated("keydown", t, (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
+		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());
 		}), append(e, t);
 	};
-	if_block(S, (e) => {
-		a() && e(C);
+	if_block(R, (e) => {
+		o() && e(G);
 	});
-	var k = sibling(S, 2);
-	let R;
-	var G = child(k);
-	return snippet(child(G), () => i() ?? noop), reset(G), reset(k), template_effect(() => {
-		R = set_class(k, 1, `accordion ${c() ?? "" ?? ""}`, "svelte-1p9ezsm", R, { expanded: n() }), set_attribute(k, "data-pw", typeof l() == "string" ? l() : null), set_attribute(k, "testid", typeof l() == "string" ? l() : null);
-	}), append(e, h), pop(p);
+	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);
 }
 delegate(["click", "keydown"]), create_custom_element(Accordion, {
 	expand: {},
@@ -11841,7 +11858,8 @@ delegate(["click", "keydown"]), create_custom_element(Accordion, {
 	triggerClasses: {},
 	classes: {},
 	testId: {},
-	disabled: {}
+	disabled: {},
+	panelId: {}
 }, [], [], { mode: "open" });
 //#endregion
 //#region src/wc/components/Accordion.wc.svelte
@@ -11874,6 +11892,10 @@ customElements.define("sui-accordion", create_custom_element(Accordion_wc, {
 	testId: {
 		attribute: "test-id",
 		type: "String"
+	},
+	panelId: {
+		attribute: "panel-id",
+		type: "String"
 	}
 }, ["default"], [], { mode: "open" }));
 //#endregion

package/package.json

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