@juspay/svelte-ui-components 3.3.1 → 3.4.0

package/dist/Pill/Pill.svelte

@@ -10,6 +10,7 @@
     testId,
     title,
     dismissIcon,
+    dismissLabel,
     leadingIcon,
     onclick,
     ondismiss: ondismissLegacy,
@@ -30,6 +31,9 @@
   }
 
   function handleKeydown(event: KeyboardEvent): void {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       if (event.currentTarget instanceof HTMLElement) {
@@ -66,10 +70,12 @@
   <span class="pill-text">{text}</span>
   {#if dismissible}
     <div class="pill-dismiss">
+      <!-- A dismiss action is a bare icon, not a primary call to action. -->
       <Button
+        variant="ghost"
         {disabled}
         onclick={handleDismiss}
-        ariaLabel="Dismiss"
+        ariaLabel={dismissLabel?.trim() || 'Dismiss'}
         {...typeof testId === 'string' ? { testId: `${testId}-dismiss` } : {}}
       >
         {#if typeof dismissIcon === 'function'}
@@ -147,6 +153,25 @@
     flex-shrink: 0;
   }
 
+  /* Consumer themes can set Button tokens on its container, beating inherited
+     wrapper values. Pin the painting element too so the chip owns its enabled
+     glyph; leave disabled colours and focus indicators to the consumer theme. */
+  .pill-dismiss :global(.button-container),
+  .pill-dismiss :global(.button-el) {
+    --button-color: transparent;
+    --button-background: none;
+    --button-active-background: transparent;
+    --button-border: none;
+    --button-padding: 0;
+    --button-text-color: var(--pill-dismiss-color, currentColor);
+    --button-hover-color: transparent;
+    --button-hover-border: none;
+    --button-hover-text-color: var(
+      --pill-dismiss-hover-color,
+      var(--pill-dismiss-color, currentColor)
+    );
+  }
+
   .pill-dismiss :global(svg) {
     width: var(--pill-dismiss-size, 14px);
     height: var(--pill-dismiss-size, 14px);

package/dist/Pill/properties.d.ts

@@ -9,6 +9,11 @@ export type OptionalPillProperties = {
     testId?: string;
     title?: string;
     dismissIcon?: Snippet;
+    /**
+     * Accessible name of the dismiss control. Defaults to "Dismiss"; pass a translated
+     * string for localised products. Blank values fall back to the default.
+     */
+    dismissLabel?: string;
     /**
      * A Svelte snippet rendered immediately before the text label inside a
      * `<span class="pill-leading-icon">` wrapper. Use for icons, logos, or any

package/dist/Toggle/Toggle.svelte

@@ -7,6 +7,9 @@
     disabled = false,
     testId,
     classes,
+    id,
+    ariaLabel,
+    ariaLabelledby,
     onclick: onclickLegacy,
     onClick
   }: ToggleProperties = $props();
@@ -14,6 +17,10 @@
   // Event-casing phase 1: both spellings accepted, the correct one wins.
   const onclick = $derived(onClick ?? onclickLegacy);
 
+  // Stable across hydration so the hidden input stays named and text remains clickable.
+  const generatedId = $props.id();
+  const inputId = $derived(id?.trim() || `toggle-${generatedId}`);
+
   const handleCheckboxClick = (e: MouseEvent): void => {
     if (e.target instanceof HTMLInputElement && typeof e.target.checked === 'boolean') {
       checked = e.target.checked;
@@ -29,13 +36,16 @@
   data-pw={testId}
   testID={testId}
 >
-  <div class="text" hidden={text.length === 0}>{text}</div>
+  <label class="text" for={inputId} hidden={text.length === 0}>{text}</label>
   <label class="switch">
     <input
+      id={inputId}
       class="input-checkbox"
       type="checkbox"
       {checked}
       {disabled}
+      aria-label={ariaLabel?.trim() || null}
+      aria-labelledby={ariaLabelledby?.trim() || null}
       onclick={handleCheckboxClick}
     />
     <span class="slider round"></span>

package/dist/Toggle/properties.d.ts

@@ -5,6 +5,20 @@ export type OptionalToggleProperties = {
     disabled?: boolean;
     testId?: string;
     classes?: string;
+    /**
+     * Native `id` of the checkbox input, so a consumer can point its own `<label for>`
+     * at the control. Generated when omitted or blank, which is what wires `text` up as a real
+     * label rather than adjacent text.
+     */
+    id?: string;
+    /** Names the switch for assistive technology when it has no visible text. */
+    ariaLabel?: string;
+    /**
+     * References a label in the same DOM root as the checkbox. `<sui-toggle>` exposes this as
+     * `inputAriaLabelledby` (`input-aria-labelledby`); it cannot reach the host document, so use
+     * `text` or `inputAriaLabel` for labels outside the shadow root.
+     */
+    ariaLabelledby?: string;
 };
 export type ToggleEventProperties = {
     onclick?: (checked: boolean) => void;

package/dist-wc/index.js

@@ -6755,21 +6755,21 @@ delegate([
 //#region src/lib/assets/close.svg?raw
 var close_default = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", root$77 = /* @__PURE__ */ from_html("<span class=\"pill-leading-icon svelte-13eug5u\"><!></span>"), root_1$64 = /* @__PURE__ */ from_html("<div class=\"pill-dismiss svelte-13eug5u\"><!></div>"), root_2$48 = /* @__PURE__ */ from_html("<div><!> <span class=\"pill-text svelte-13eug5u\"> </span> <!></div>"), $$css$75 = {
 	hash: "svelte-13eug5u",
-	code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n    /* A pill is content-width by default. A caller stacking pills into a menu needs\n       them to fill the column and align their labels left, which is a layout choice\n       the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(--pill-background, #e0e0e0);color:var(--pill-color, #333333);font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);cursor:var(--pill-cursor, pointer);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(--pill-hover-background, var(--pill-background, #d0d0d0));color:var(--pill-hover-color, var(--pill-color, #333333));}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
+	code: ".pill.svelte-13eug5u {display:inline-flex;align-items:center;\n    /* A pill is content-width by default. A caller stacking pills into a menu needs\n       them to fill the column and align their labels left, which is a layout choice\n       the call site owns — hence tokens rather than a variant. */width:var(--pill-width, auto);justify-content:var(--pill-justify-content, center);text-align:var(--pill-text-align, center);gap:var(--pill-gap, 4px);background-color:var(--pill-background, #e0e0e0);color:var(--pill-color, #333333);font-size:var(--pill-font-size, 13px);font-weight:var(--pill-font-weight, 500);font-family:var(--pill-font-family);padding:var(--pill-padding, 6px 10px);border-radius:var(--pill-border-radius, 999px);border:var(--pill-border, none);cursor:var(--pill-cursor, pointer);max-width:var(--pill-max-width);line-height:var(--pill-line-height, 1);flex-shrink:var(--pill-flex-shrink);}.pill.svelte-13eug5u:hover:not(.disabled) {background-color:var(--pill-hover-background, var(--pill-background, #d0d0d0));color:var(--pill-hover-color, var(--pill-color, #333333));}.pill.disabled.svelte-13eug5u {opacity:var(--pill-disabled-opacity, 0.4);cursor:var(--pill-disabled-cursor, not-allowed);}.pill-text.svelte-13eug5u {overflow:hidden;text-overflow:var(--pill-text-overflow, ellipsis);white-space:var(--pill-text-white-space, nowrap);}.pill-leading-icon.svelte-13eug5u {display:inline-flex;align-items:center;flex-shrink:0;}.pill-dismiss.svelte-13eug5u {--button-color: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );--cursor: inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}\n\n  /* Consumer themes can set Button tokens on its container, beating inherited\n     wrapper values. Pin the painting element too so the chip owns its enabled\n     glyph; leave disabled colours and focus indicators to the consumer theme. */.pill-dismiss.svelte-13eug5u .button-container,\n  .pill-dismiss.svelte-13eug5u .button-el {--button-color: transparent;--button-background: none;--button-active-background: transparent;--button-border: none;--button-padding: 0;--button-text-color: var(--pill-dismiss-color, currentColor);--button-hover-color: transparent;--button-hover-border: none;--button-hover-text-color: var(\n      --pill-dismiss-hover-color,\n      var(--pill-dismiss-color, currentColor)\n    );}.pill-dismiss.svelte-13eug5u svg {width:var(--pill-dismiss-size, 14px);height:var(--pill-dismiss-size, 14px);}"
 };
 function Pill(e, t) {
 	push(t, !0), append_styles$1(e, $$css$75);
-	let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "testId", 7), s = prop(t, "title", 7), c = prop(t, "dismissIcon", 7), l = prop(t, "leadingIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "ondismiss", 7), p = prop(t, "onDismiss", 7), h = prop(t, "classes", 7), S = /* @__PURE__ */ user_derived(() => p() ?? f()), C = /* @__PURE__ */ user_derived(() => typeof u() == "function");
-	function k(e) {
-		a() || u()?.(e);
-	}
+	let n = prop(t, "text", 7), i = prop(t, "dismissible", 7, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "testId", 7), s = prop(t, "title", 7), c = prop(t, "dismissIcon", 7), l = prop(t, "dismissLabel", 7), u = prop(t, "leadingIcon", 7), f = prop(t, "onclick", 7), p = prop(t, "ondismiss", 7), h = prop(t, "onDismiss", 7), S = prop(t, "classes", 7), C = /* @__PURE__ */ user_derived(() => h() ?? p()), k = /* @__PURE__ */ user_derived(() => typeof f() == "function");
 	function R(e) {
-		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
+		a() || f()?.(e);
 	}
 	function G(e) {
-		e.stopPropagation(), !a() && get(S)?.();
+		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget instanceof HTMLElement && e.currentTarget.click());
 	}
-	var te = {
+	function te(e) {
+		e.stopPropagation(), !a() && get(C)?.();
+	}
+	var ne = {
 		get text() {
 			return n();
 		},
@@ -6806,80 +6806,93 @@ function Pill(e, t) {
 		set dismissIcon(e) {
 			c(e), flushSync();
 		},
-		get leadingIcon() {
+		get dismissLabel() {
 			return l();
 		},
-		set leadingIcon(e) {
+		set dismissLabel(e) {
 			l(e), flushSync();
 		},
-		get onclick() {
+		get leadingIcon() {
 			return u();
 		},
-		set onclick(e) {
+		set leadingIcon(e) {
 			u(e), flushSync();
 		},
-		get ondismiss() {
+		get onclick() {
 			return f();
 		},
-		set ondismiss(e) {
+		set onclick(e) {
 			f(e), flushSync();
 		},
-		get onDismiss() {
+		get ondismiss() {
 			return p();
 		},
-		set onDismiss(e) {
+		set ondismiss(e) {
 			p(e), flushSync();
 		},
-		get classes() {
+		get onDismiss() {
 			return h();
 		},
-		set classes(e) {
+		set onDismiss(e) {
 			h(e), flushSync();
+		},
+		get classes() {
+			return S();
+		},
+		set classes(e) {
+			S(e), flushSync();
 		}
-	}, ne = root_2$48();
-	let re;
-	var be = child(ne), Me = (e) => {
+	}, re = root_2$48();
+	let be;
+	var Me = child(re), Re = (e) => {
 		var t = root$77();
-		snippet(child(t), l), reset(t), append(e, t);
+		snippet(child(t), u), reset(t), append(e, t);
 	};
-	if_block(be, (e) => {
-		typeof l() == "function" && e(Me);
+	if_block(Me, (e) => {
+		typeof u() == "function" && e(Re);
 	});
-	var Re = sibling(be, 2), Ue = child(Re, !0);
-	reset(Re);
-	var it = sibling(Re, 2), at = (e) => {
-		var t = root_1$64();
-		Button(child(t), spread_props({
-			get disabled() {
-				return a();
-			},
-			onclick: G,
-			ariaLabel: "Dismiss"
-		}, () => typeof o() == "string" ? { testId: `${o()}-dismiss` } : {}, {
-			children: (e, t) => {
-				var n = comment(), i = first_child(n), a = (e) => {
-					var t = comment();
-					snippet(first_child(t), c), append(e, t);
-				}, o = (e) => {
-					var t = comment();
-					html(first_child(t), () => close_default), append(e, t);
-				};
-				if_block(i, (e) => {
-					typeof c() == "function" ? e(a) : e(o, -1);
-				}), append(e, n);
-			},
-			$$slots: { default: !0 }
-		})), reset(t), append(e, t);
+	var Ue = sibling(Me, 2), it = child(Ue, !0);
+	reset(Ue);
+	var at = sibling(Ue, 2), ot = (e) => {
+		var t = root_1$64(), n = child(t);
+		{
+			let e = /* @__PURE__ */ user_derived(() => l()?.trim() || "Dismiss");
+			Button(n, spread_props({
+				variant: "ghost",
+				get disabled() {
+					return a();
+				},
+				onclick: te,
+				get ariaLabel() {
+					return get(e);
+				}
+			}, () => typeof o() == "string" ? { testId: `${o()}-dismiss` } : {}, {
+				children: (e, t) => {
+					var n = comment(), i = first_child(n), a = (e) => {
+						var t = comment();
+						snippet(first_child(t), c), append(e, t);
+					}, o = (e) => {
+						var t = comment();
+						html(first_child(t), () => close_default), append(e, t);
+					};
+					if_block(i, (e) => {
+						typeof c() == "function" ? e(a) : e(o, -1);
+					}), append(e, n);
+				},
+				$$slots: { default: !0 }
+			}));
+		}
+		reset(t), append(e, t);
 	};
-	return if_block(it, (e) => {
-		i() && e(at);
-	}), reset(ne), template_effect(() => {
-		re = set_class(ne, 1, `pill ${h() ?? "" ?? ""}`, "svelte-13eug5u", re, { disabled: a() }), set_attribute(ne, "role", get(C) ? "button" : null), set_attribute(ne, "tabindex", get(C) ? 0 : null), set_attribute(ne, "aria-disabled", get(C) && a() ? !0 : null), set_attribute(ne, "data-pw", typeof o() == "string" ? o() : null), set_attribute(ne, "title", s() ?? null), set_attribute(ne, "testid", typeof o() == "string" ? o() : null), set_text(Ue, n());
-	}), delegated("click", ne, function(...e) {
-		(get(C) ? k : null)?.apply(this, e);
-	}), delegated("keydown", ne, function(...e) {
-		(get(C) ? R : null)?.apply(this, e);
-	}), append(e, ne), pop(te);
+	return if_block(at, (e) => {
+		i() && e(ot);
+	}), reset(re), template_effect(() => {
+		be = set_class(re, 1, `pill ${S() ?? "" ?? ""}`, "svelte-13eug5u", be, { disabled: a() }), set_attribute(re, "role", get(k) ? "button" : null), set_attribute(re, "tabindex", get(k) ? 0 : null), set_attribute(re, "aria-disabled", get(k) && a() ? !0 : null), set_attribute(re, "data-pw", typeof o() == "string" ? o() : null), set_attribute(re, "title", s() ?? null), set_attribute(re, "testid", typeof o() == "string" ? o() : null), set_text(it, n());
+	}), delegated("click", re, function(...e) {
+		(get(k) ? R : null)?.apply(this, e);
+	}), delegated("keydown", re, function(...e) {
+		(get(k) ? G : null)?.apply(this, e);
+	}), append(e, re), pop(ne);
 }
 delegate(["click", "keydown"]), create_custom_element(Pill, {
 	text: {},
@@ -6888,6 +6901,7 @@ delegate(["click", "keydown"]), create_custom_element(Pill, {
 	testId: {},
 	title: {},
 	dismissIcon: {},
+	dismissLabel: {},
 	leadingIcon: {},
 	onclick: {},
 	ondismiss: {},
@@ -10339,7 +10353,10 @@ function Pill_wc(e, t) {
 		},
 		dismissIcon: (e) => {
 			var n = comment();
-			slot(first_child(n), t, "dismiss-icon", {}, null), append(e, n);
+			slot(first_child(n), t, "dismiss-icon", {}, (e) => {
+				var t = comment();
+				html(first_child(t), () => close_default), append(e, t);
+			}), append(e, n);
 		},
 		$$slots: {
 			leadingIcon: !0,
@@ -10370,6 +10387,10 @@ customElements.define("sui-pill", create_custom_element(Pill_wc, {
 	},
 	leadingIcon: { type: "Object" },
 	dismissIcon: { type: "Object" },
+	dismissLabel: {
+		attribute: "dismiss-label",
+		type: "String"
+	},
 	classes: { type: "String" },
 	onclick: { type: "Object" },
 	ondismiss: { type: "Object" },
@@ -12286,66 +12307,85 @@ customElements.define("sui-theme-switcher", create_custom_element(ThemeSwitcher_
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Toggle/Toggle.svelte
-var root$52 = /* @__PURE__ */ from_html("<div><div class=\"text svelte-1kpnf4s\"> </div> <label class=\"switch svelte-1kpnf4s\"><input class=\"input-checkbox svelte-1kpnf4s\" type=\"checkbox\"/> <span class=\"slider round svelte-1kpnf4s\"></span></label></div>"), $$css$50 = {
+var root$52 = /* @__PURE__ */ from_html("<div><label class=\"text svelte-1kpnf4s\"> </label> <label class=\"switch svelte-1kpnf4s\"><input class=\"input-checkbox svelte-1kpnf4s\" type=\"checkbox\"/> <span class=\"slider round svelte-1kpnf4s\"></span></label></div>"), $$css$50 = {
 	hash: "svelte-1kpnf4s",
 	code: ".container.svelte-1kpnf4s {display:var(--toggle-container-display, flex);align-items:var(--toggle-container-align-items, center);gap:var(--toggle-container-gap, 8px);}.container.disabled.svelte-1kpnf4s {opacity:var(--toggle-disabled-opacity, 0.4);cursor:not-allowed;pointer-events:none;}.text.svelte-1kpnf4s {font-size:var(--toggle-text-font-size, 14px);font-weight:var(--toggle-text-font-weight, 400);color:var(--toggle-text-color, #4a4a4a);margin:var(--toggle-text-margin, 0px 8px 0px 0px);order:var(--toggle-text-order, 0);}.switch.svelte-1kpnf4s {position:relative;display:inline-block;width:var(--toggle-switch-width, 46px);height:var(--toggle-switch-height, 25px);}.switch.svelte-1kpnf4s .input-checkbox:where(.svelte-1kpnf4s) {opacity:0;width:0;height:0;}.slider.svelte-1kpnf4s {position:absolute;cursor:pointer;top:var(--toggle-slider-top, 0);left:var(--toggle-slider-left, 0);right:var(--toggle-slider-right, 0);bottom:var(--toggle-slider-bottom, 0);background-color:var(--slider-unchecked-color, #ccc);-webkit-transition:var(--toggle-slider-transition, 0.4s);transition:var(--toggle-slider-transition, 0.4s);}.slider.svelte-1kpnf4s:before {position:absolute;content:'';height:var(--toggle-ball-height, 23px);width:var(--toggle-ball-width, 23px);left:var(--toggle-slider-before-left, 2px);bottom:var(--toggle-slider-before-bottom, 1px);top:var(--toggle-slider-before-top, 1px);background-color:var(--toggle-slider-before-background-color, white);-webkit-transition:var(--toggle-slider-transition, 0.4s);transition:var(--toggle-slider-transition, 0.4s);}.input-checkbox.svelte-1kpnf4s:checked + .slider:where(.svelte-1kpnf4s) {background-color:var(--slider-checked-color, #2196f3);}.input-checkbox.svelte-1kpnf4s:focus + .slider:where(.svelte-1kpnf4s) {box-shadow:0 0 1px #171717;}.input-checkbox.svelte-1kpnf4s:checked + .slider:where(.svelte-1kpnf4s):before {-webkit-transform:translateX(19px);-ms-transform:translateX(19px);transform:translateX(19px);}.slider.round.svelte-1kpnf4s {border-radius:var(--slider-border-radius, 23px);}.slider.round.svelte-1kpnf4s:before {border-radius:var(--slider-border-radius-before, 50%);}"
 };
 function Toggle(e, t) {
+	let n = props_id();
 	push(t, !0), append_styles$1(e, $$css$50);
-	let n = prop(t, "checked", 7, !1), i = prop(t, "text", 7, ""), a = prop(t, "disabled", 7, !1), o = prop(t, "testId", 7), s = prop(t, "classes", 7), c = prop(t, "onclick", 7), l = prop(t, "onClick", 7), u = /* @__PURE__ */ user_derived(() => l() ?? c()), f = (e) => {
-		e.target instanceof HTMLInputElement && typeof e.target.checked == "boolean" && n(e.target.checked), get(u)?.(n());
+	let i = prop(t, "checked", 7, !1), a = prop(t, "text", 7, ""), o = prop(t, "disabled", 7, !1), s = prop(t, "testId", 7), c = prop(t, "classes", 7), l = prop(t, "id", 7), u = prop(t, "ariaLabel", 7), f = prop(t, "ariaLabelledby", 7), p = prop(t, "onclick", 7), h = prop(t, "onClick", 7), S = /* @__PURE__ */ user_derived(() => h() ?? p()), C = /* @__PURE__ */ user_derived(() => l()?.trim() || `toggle-${n}`), k = (e) => {
+		e.target instanceof HTMLInputElement && typeof e.target.checked == "boolean" && i(e.target.checked), get(S)?.(i());
 	};
-	var p = {
+	var R = {
 		get checked() {
-			return n();
+			return i();
 		},
 		set checked(e = !1) {
-			n(e), flushSync();
+			i(e), flushSync();
 		},
 		get text() {
-			return i();
+			return a();
 		},
 		set text(e = "") {
-			i(e), flushSync();
+			a(e), flushSync();
 		},
 		get disabled() {
-			return a();
+			return o();
 		},
 		set disabled(e = !1) {
-			a(e), flushSync();
+			o(e), flushSync();
 		},
 		get testId() {
-			return o();
+			return s();
 		},
 		set testId(e) {
-			o(e), flushSync();
+			s(e), flushSync();
 		},
 		get classes() {
-			return s();
+			return c();
 		},
 		set classes(e) {
-			s(e), flushSync();
+			c(e), flushSync();
+		},
+		get id() {
+			return l();
+		},
+		set id(e) {
+			l(e), flushSync();
+		},
+		get ariaLabel() {
+			return u();
+		},
+		set ariaLabel(e) {
+			u(e), flushSync();
+		},
+		get ariaLabelledby() {
+			return f();
+		},
+		set ariaLabelledby(e) {
+			f(e), flushSync();
 		},
 		get onclick() {
-			return c();
+			return p();
 		},
 		set onclick(e) {
-			c(e), flushSync();
+			p(e), flushSync();
 		},
 		get onClick() {
-			return l();
+			return h();
 		},
 		set onClick(e) {
-			l(e), flushSync();
+			h(e), flushSync();
 		}
-	}, h = root$52();
-	let S;
-	var C = child(h), k = child(C, !0);
-	reset(C);
-	var R = sibling(C, 2), G = child(R);
-	return remove_input_defaults(G), next(2), reset(R), reset(h), template_effect(() => {
-		S = set_class(h, 1, `container ${s() ?? "" ?? ""}`, "svelte-1kpnf4s", S, { disabled: a() }), set_attribute(h, "aria-disabled", a()), set_attribute(h, "data-pw", o()), set_attribute(h, "testid", o()), set_attribute(C, "hidden", i().length === 0), set_text(k, i()), set_checked(G, n()), G.disabled = a();
-	}), delegated("click", G, f), append(e, h), pop(p);
+	}, G = root$52();
+	let te;
+	var ne = child(G), re = child(ne, !0);
+	reset(ne);
+	var be = sibling(ne, 2), Me = child(be);
+	return remove_input_defaults(Me), next(2), reset(be), reset(G), template_effect((e, t) => {
+		te = set_class(G, 1, `container ${c() ?? "" ?? ""}`, "svelte-1kpnf4s", te, { disabled: o() }), set_attribute(G, "aria-disabled", o()), set_attribute(G, "data-pw", s()), set_attribute(G, "testid", s()), set_attribute(ne, "for", get(C)), set_attribute(ne, "hidden", a().length === 0), set_text(re, a()), set_attribute(Me, "id", get(C)), set_checked(Me, i()), Me.disabled = o(), set_attribute(Me, "aria-label", e), set_attribute(Me, "aria-labelledby", t);
+	}, [() => u()?.trim() || null, () => f()?.trim() || null]), delegated("click", Me, k), append(e, G), pop(R);
 }
 delegate(["click"]), create_custom_element(Toggle, {
 	checked: {},
@@ -12353,6 +12393,9 @@ delegate(["click"]), create_custom_element(Toggle, {
 	disabled: {},
 	testId: {},
 	classes: {},
+	id: {},
+	ariaLabel: {},
+	ariaLabelledby: {},
 	onclick: {},
 	onClick: {}
 }, [], [], { mode: "open" });
@@ -12362,11 +12405,44 @@ var rest_excludes$51 = new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
-	"$$host"
+	"$$host",
+	"inputId",
+	"inputAriaLabel",
+	"inputAriaLabelledby"
 ]);
 function Toggle_wc(e, t) {
-	let n = /* @__PURE__ */ rest_props(t, rest_excludes$51);
-	Toggle(e, spread_props(() => n));
+	push(t, !0);
+	let n = prop(t, "inputId", 7, ""), i = prop(t, "inputAriaLabel", 7, ""), a = prop(t, "inputAriaLabelledby", 7, ""), o = /* @__PURE__ */ rest_props(t, rest_excludes$51);
+	return Toggle(e, spread_props(() => o, {
+		get id() {
+			return n();
+		},
+		get ariaLabel() {
+			return i();
+		},
+		get ariaLabelledby() {
+			return a();
+		}
+	})), pop({
+		get inputId() {
+			return n();
+		},
+		set inputId(e = "") {
+			n(e), flushSync();
+		},
+		get inputAriaLabel() {
+			return i();
+		},
+		set inputAriaLabel(e = "") {
+			i(e), flushSync();
+		},
+		get inputAriaLabelledby() {
+			return a();
+		},
+		set inputAriaLabelledby(e = "") {
+			a(e), flushSync();
+		}
+	});
 }
 customElements.define("sui-toggle", create_custom_element(Toggle_wc, {
 	checked: {
@@ -12387,7 +12463,19 @@ customElements.define("sui-toggle", create_custom_element(Toggle_wc, {
 		attribute: "test-id",
 		type: "String"
 	},
-	onClick: { type: "Object" }
+	onClick: { type: "Object" },
+	inputId: {
+		attribute: "input-id",
+		type: "String"
+	},
+	inputAriaLabel: {
+		attribute: "input-aria-label",
+		type: "String"
+	},
+	inputAriaLabelledby: {
+		attribute: "input-aria-labelledby",
+		type: "String"
+	}
 }, [], [], { mode: "open" }));
 //#endregion
 //#region src/lib/Accordion/Accordion.svelte

package/package.json

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