@juspay/svelte-ui-components 2.136.8 → 2.136.9

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-wc/index.js

@@ -11760,78 +11760,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 +11848,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 +11882,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.9",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",