@juspay/svelte-ui-components 4.10.0 → 4.10.2

package/README.md

@@ -243,6 +243,33 @@ import '@juspay/svelte-ui-components/wc';
 Theming works identically to the Svelte components — the same `--{component}-{element}-{property}`
 CSS custom properties apply across the shadow DOM boundary.
 
+### Event handlers: use `addEventListener`, not `element.onclick`
+
+Handlers are passed as **props**, and 91 of those props are named after event-handler
+accessors that already exist on `HTMLElement` — `onclick`, `onchange`, `oninput`,
+`onkeydown` and 21 others. On a custom element the component's prop wins, so assigning
+the property does not register a DOM handler the way it would anywhere else:
+
+```js
+const checkbox = document.querySelector('sui-checkbox');
+
+// Sets the component's prop. On sui-checkbox and sui-toggle that prop is called
+// with a boolean, so `event` here is `true` / `false`, not a MouseEvent.
+checkbox.onclick = (event) => console.log(event.clientX); // undefined
+
+// Always does what you expect.
+checkbox.addEventListener('click', (event) => console.log(event.clientX));
+```
+
+Two things are **not** affected: the inline HTML attribute (`<sui-button onclick="...">`)
+never used this accessor, and `addEventListener` is untouched. Only the JavaScript
+property assignment differs.
+
+Renaming these is a breaking change to every element's JavaScript API, so the whole set
+has to move at once at a major — the same way the `aria*` collisions were renamed in
+4.0.0. Until then the existing declarations are recorded in
+`scripts/wc-parity/prop-parity.test.ts`, which fails the build on a new one.
+
 ---
 
 ## Theming

package/dist/Checkbox/Checkbox.svelte

@@ -19,6 +19,23 @@
     attributes
   }: CheckboxProperties = $props();
 
+  // Visible text wins over `ariaLabel`, which is what `properties.ts` has always
+  // promised and what WCAG 2.5.3 requires: a control showing "Accept terms" must
+  // carry that text in its accessible name, so letting an explicit label replace
+  // it outright would swap the name a speech-input user says for one they cannot
+  // see. `ariaLabel` names the box only when there is no visible text to use —
+  // the icon-only and label-in-a-table-header cases it exists for.
+  //
+  // A blank `ariaLabel` is treated as absent rather than as an empty name, since
+  // `aria-label=""` leaves the box unnamed, which is the bug this fixes.
+  const accessibleName: string | null = $derived(
+    text.length > 0
+      ? text
+      : typeof ariaLabel === 'string' && ariaLabel.trim() !== ''
+        ? ariaLabel
+        : null
+  );
+
   function handleClick(): void {
     if (disabled) {
       return;
@@ -82,7 +99,7 @@
     aria-checked={indeterminate ? 'mixed' : checked}
     aria-disabled={disabled}
     aria-controls={ariaControls ?? null}
-    aria-label={text.length === 0 ? (ariaLabel ?? null) : null}
+    aria-label={accessibleName}
     onkeydown={handleKeyDown}
     data-pw={typeof testId === 'string' ? `${testId}-box` : null}
     testID={typeof testId === 'string' ? `${testId}-box` : null}

package/dist/SplitButton/SplitButton.svelte

@@ -12,12 +12,27 @@
     testId,
     dropdownIcon,
     classes,
+    triggerAriaLabel,
     onclick,
     onselect
   }: SplitButtonProperties = $props();
 
   let menuOpen = $state(false);
 
+  // The dropdown trigger renders a chevron and nothing else, so without a name it is a
+  // focusable control that announces as an unnamed button.
+  // A blank `triggerAriaLabel` falls back rather than being honoured: `??` only
+  // rejects null and undefined, so an empty string would have been passed
+  // through as `aria-label=""` and left the trigger unnamed — the very thing
+  // this generated fallback exists to prevent.
+  let resolvedTriggerAriaLabel = $derived(
+    typeof triggerAriaLabel === 'string' && triggerAriaLabel.trim() !== ''
+      ? triggerAriaLabel
+      : text.length > 0
+        ? `More ${text} options`
+        : 'More options'
+  );
+
   function handlePrimaryClick(event: MouseEvent): void {
     if (disabled) {
       return;
@@ -40,7 +55,12 @@
     <Button {text} onclick={handlePrimaryClick} {disabled} />
   </div>
   <div class="split-button-trigger">
-    <Menu {items} bind:open={menuOpen} onselect={handleMenuSelect}>
+    <Menu
+      {items}
+      bind:open={menuOpen}
+      triggerAriaLabel={resolvedTriggerAriaLabel}
+      onselect={handleMenuSelect}
+    >
       {#snippet trigger()}
         <span class="split-button-arrow">
           {#if typeof dropdownIcon === 'function'}

package/dist/SplitButton/properties.d.ts

@@ -10,6 +10,13 @@ export type OptionalSplitButtonProperties = {
     testId?: string;
     dropdownIcon?: Snippet;
     classes?: string;
+    /**
+     * Accessible name for the dropdown trigger — the second control, which shows only a
+     * chevron and so has no text to be named by. Defaults to `More <text> options`, which
+     * distinguishes it from the primary button beside it. Named after Menu's own
+     * `triggerAriaLabel`, which is what it forwards to.
+     */
+    triggerAriaLabel?: string;
 };
 export type SplitButtonEventProperties = {
     onclick?: (event: MouseEvent) => void;

package/dist/Table/BuiltinCell.svelte

@@ -447,11 +447,16 @@
           }))}
           testId={generatedTestId('menu', rowIndex)}
           {usePortal}
+          interactiveTrigger
           onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
         >
-          {#snippet trigger()}
+          {#snippet trigger(triggerProps)}
             <span class="builtin-icon-button">
-              <Button ariaLabel="More actions" testId={generatedTestId('menuTrigger', rowIndex)}>
+              <Button
+                {...triggerProps}
+                ariaLabel="More actions"
+                testId={generatedTestId('menuTrigger', rowIndex)}
+              >
                 {#snippet icon()}
                   <!-- eslint-disable svelte/no-at-html-tags -->
                   <span class="builtin-menu-dots">{@html dotsSvg}</span>
@@ -483,11 +488,13 @@
         }))}
         testId={generatedTestId('popup', rowIndex)}
         {usePortal}
+        interactiveTrigger
         onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
       >
-        {#snippet trigger()}
+        {#snippet trigger(triggerProps)}
           <span class="builtin-icon-button">
             <Button
+              {...triggerProps}
               ariaLabel={popupData.ariaLabel ?? 'More actions'}
               testId={generatedTestId('popupTrigger', rowIndex)}
             >

package/dist/Table/Table.svelte

@@ -758,19 +758,21 @@
                           }))}
                           selectedValue={filter.selectedValue ?? null}
                           role="listbox"
+                          interactiveTrigger
                           testId={headerColumn.testId && `${headerColumn.testId}-filter`}
                           onselect={(menuItem) =>
                             filter.onFilterChange?.(
                               menuItem.value === filter.selectedValue ? null : menuItem.value
                             )}
                         >
-                          {#snippet trigger()}
+                          {#snippet trigger(triggerProps)}
                             <span
                               class="table-header-filter-trigger"
                               class:table-header-filter-active={typeof filter.selectedValue ===
                                 'string'}
                             >
                               <Button
+                                {...triggerProps}
                                 ariaLabel="Filter by {header}"
                                 testId={headerColumn.testId &&
                                   `${headerColumn.testId}-filter-trigger`}

package/dist-wc/index.js

@@ -5745,8 +5745,8 @@ var checkmark_default = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"curre
 };
 function Checkbox(e, t) {
 	push(t, !0), append_styles$1(e, $$css$77);
-	let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "indeterminate", 15, !1), s = prop(t, "testId", 7), c = prop(t, "checkedIcon", 7), l = prop(t, "indeterminateIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "ariaControls", 7), h = prop(t, "ariaLabel", 7), S = prop(t, "controlled", 7, !1), C = prop(t, "attributes", 7);
-	function k() {
+	let n = prop(t, "text", 7), i = prop(t, "checked", 15, !1), a = prop(t, "disabled", 7, !1), o = prop(t, "indeterminate", 15, !1), s = prop(t, "testId", 7), c = prop(t, "checkedIcon", 7), l = prop(t, "indeterminateIcon", 7), u = prop(t, "onclick", 7), f = prop(t, "classes", 7), p = prop(t, "ariaControls", 7), h = prop(t, "ariaLabel", 7), S = prop(t, "controlled", 7, !1), C = prop(t, "attributes", 7), k = /* @__PURE__ */ user_derived(() => n().length > 0 ? n() : typeof h() == "string" && h().trim() !== "" ? h() : null);
+	function R() {
 		if (!a()) {
 			if (S()) {
 				u()?.(!i());
@@ -5755,10 +5755,10 @@ function Checkbox(e, t) {
 			i(!i()), o() && o(!1), u()?.(i());
 		}
 	}
-	function R(e) {
-		(e.key === " " || e.key === "Enter") && (e.preventDefault(), k());
+	function G(e) {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), R());
 	}
-	var G = {
+	var te = {
 		get text() {
 			return n();
 		},
@@ -5837,20 +5837,20 @@ function Checkbox(e, t) {
 		set attributes(e) {
 			C(e), flushSync();
 		}
-	}, te = root_2$50();
-	let ne;
-	var re = child(te);
-	remove_input_defaults(re), set_attribute(re, "tabindex", -1);
-	var be = sibling(re, 2);
-	attribute_effect(be, () => ({
+	}, ne = root_2$50();
+	let re;
+	var be = child(ne);
+	remove_input_defaults(be), set_attribute(be, "tabindex", -1);
+	var Me = sibling(be, 2);
+	attribute_effect(Me, () => ({
 		class: "box",
 		role: "checkbox",
 		tabindex: a() ? -1 : 0,
 		"aria-checked": o() ? "mixed" : i(),
 		"aria-disabled": a(),
 		"aria-controls": p() ?? null,
-		"aria-label": n().length === 0 ? h() ?? null : null,
-		onkeydown: R,
+		"aria-label": get(k),
+		onkeydown: G,
 		"data-pw": typeof s() == "string" ? `${s()}-box` : null,
 		testID: typeof s() == "string" ? `${s()}-box` : null,
 		...C(),
@@ -5859,7 +5859,7 @@ function Checkbox(e, t) {
 			indeterminate: o()
 		}
 	}), void 0, void 0, void 0, "svelte-f1in4m");
-	var Me = child(be), Re = (e) => {
+	var Re = child(Me), Ue = (e) => {
 		var t = comment(), n = first_child(t), i = (e) => {
 			var t = comment();
 			snippet(first_child(t), c), append(e, t);
@@ -5871,10 +5871,10 @@ function Checkbox(e, t) {
 			typeof c() == "function" ? e(i) : e(a, -1);
 		}), append(e, t);
 	};
-	if_block(Me, (e) => {
-		i() && !o() && e(Re);
+	if_block(Re, (e) => {
+		i() && !o() && e(Ue);
 	});
-	var Ue = sibling(Me, 2), it = (e) => {
+	var it = sibling(Re, 2), at = (e) => {
 		var t = comment(), n = first_child(t), i = (e) => {
 			var t = comment();
 			snippet(first_child(t), l), append(e, t);
@@ -5886,15 +5886,15 @@ function Checkbox(e, t) {
 			typeof l() == "function" ? e(i) : e(a, -1);
 		}), append(e, t);
 	};
-	if_block(Ue, (e) => {
-		o() && e(it);
-	}), reset(be);
-	var at = sibling(be, 2), ot = child(at, !0);
-	return reset(at), reset(te), template_effect(() => {
-		ne = set_class(te, 1, `container ${f() ?? "" ?? ""}`, "svelte-f1in4m", ne, { disabled: a() }), set_attribute(te, "data-pw", s()), set_attribute(te, "testid", s()), set_checked(re, i()), re.disabled = a(), set_attribute(re, "data-pw", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(re, "testid", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(at, "hidden", n().length === 0), set_text(ot, n());
-	}), delegated("click", te, (e) => {
-		e.preventDefault(), k();
-	}), delegated("click", re, (e) => e.stopPropagation()), append(e, te), pop(G);
+	if_block(it, (e) => {
+		o() && e(at);
+	}), reset(Me);
+	var ot = sibling(Me, 2), ct = child(ot, !0);
+	return reset(ot), reset(ne), template_effect(() => {
+		re = set_class(ne, 1, `container ${f() ?? "" ?? ""}`, "svelte-f1in4m", re, { disabled: a() }), set_attribute(ne, "data-pw", s()), set_attribute(ne, "testid", s()), set_checked(be, i()), be.disabled = a(), set_attribute(be, "data-pw", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(be, "testid", typeof s() == "string" ? `${s()}-native-input` : null), set_attribute(ot, "hidden", n().length === 0), set_text(ct, n());
+	}), delegated("click", ne, (e) => {
+		e.preventDefault(), R();
+	}), delegated("click", be, (e) => e.stopPropagation()), append(e, ne), pop(te);
 }
 delegate(["click"]), create_custom_element(Checkbox, {
 	text: {},
@@ -18062,14 +18062,14 @@ var chevron_down_sm_default = "<svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6
 };
 function SplitButton(e, t) {
 	push(t, !0), append_styles$1(e, $$css$31);
-	let n = prop(t, "text", 7), i = prop(t, "items", 7), a = prop(t, "disabled", 7, !1), o = prop(t, "testId", 7), s = prop(t, "dropdownIcon", 7), c = prop(t, "classes", 7), l = prop(t, "onclick", 7), u = prop(t, "onselect", 7), f = /* @__PURE__ */ state(!1);
-	function p(e) {
-		a() || l()?.(e);
+	let n = prop(t, "text", 7), i = prop(t, "items", 7), a = prop(t, "disabled", 7, !1), o = prop(t, "testId", 7), s = prop(t, "dropdownIcon", 7), c = prop(t, "classes", 7), l = prop(t, "triggerAriaLabel", 7), u = prop(t, "onclick", 7), f = prop(t, "onselect", 7), p = /* @__PURE__ */ state(!1), h = /* @__PURE__ */ user_derived(() => typeof l() == "string" && l().trim() !== "" ? l() : n().length > 0 ? `More ${n()} options` : "More options");
+	function S(e) {
+		a() || u()?.(e);
 	}
-	function h(e) {
-		u()?.(e);
+	function C(e) {
+		f()?.(e);
 	}
-	var S = {
+	var k = {
 		get text() {
 			return n();
 		},
@@ -18106,41 +18106,50 @@ function SplitButton(e, t) {
 		set classes(e) {
 			c(e), flushSync();
 		},
-		get onclick() {
+		get triggerAriaLabel() {
 			return l();
 		},
-		set onclick(e) {
+		set triggerAriaLabel(e) {
 			l(e), flushSync();
 		},
-		get onselect() {
+		get onclick() {
 			return u();
 		},
-		set onselect(e) {
+		set onclick(e) {
 			u(e), flushSync();
+		},
+		get onselect() {
+			return f();
+		},
+		set onselect(e) {
+			f(e), flushSync();
 		}
-	}, C = root_1$26();
-	let k;
-	var R = child(C);
-	Button(child(R), {
+	}, R = root_1$26();
+	let G;
+	var te = child(R);
+	Button(child(te), {
 		get text() {
 			return n();
 		},
-		onclick: p,
+		onclick: S,
 		get disabled() {
 			return a();
 		}
-	}), reset(R);
-	var G = sibling(R, 2);
-	return Menu(child(G), {
+	}), reset(te);
+	var ne = sibling(te, 2);
+	return Menu(child(ne), {
 		get items() {
 			return i();
 		},
-		onselect: h,
+		get triggerAriaLabel() {
+			return get(h);
+		},
+		onselect: C,
 		get open() {
-			return get(f);
+			return get(p);
 		},
 		set open(e) {
-			set(f, e, !0);
+			set(p, e, !0);
 		},
 		trigger: (e) => {
 			var t = root$29(), n = child(t), i = (e) => {
@@ -18155,9 +18164,9 @@ function SplitButton(e, t) {
 			}), reset(t), append(e, t);
 		},
 		$$slots: { trigger: !0 }
-	}), reset(G), reset(C), template_effect(() => {
-		k = set_class(C, 1, `split-button ${c() ?? "" ?? ""}`, "svelte-2cti", k, { disabled: a() }), set_attribute(C, "data-pw", typeof o() == "string" ? o() : null), set_attribute(C, "testid", typeof o() == "string" ? o() : null);
-	}), append(e, C), pop(S);
+	}), reset(ne), reset(R), template_effect(() => {
+		G = set_class(R, 1, `split-button ${c() ?? "" ?? ""}`, "svelte-2cti", G, { disabled: a() }), set_attribute(R, "data-pw", typeof o() == "string" ? o() : null), set_attribute(R, "testid", typeof o() == "string" ? o() : null);
+	}), append(e, R), pop(k);
 }
 create_custom_element(SplitButton, {
 	text: {},
@@ -18166,6 +18175,7 @@ create_custom_element(SplitButton, {
 	testId: {},
 	dropdownIcon: {},
 	classes: {},
+	triggerAriaLabel: {},
 	onclick: {},
 	onselect: {}
 }, [], [], { mode: "open" });
@@ -18202,6 +18212,10 @@ customElements.define("sui-split-button", create_custom_element(SplitButton_wc,
 		type: "String"
 	},
 	classes: { type: "String" },
+	triggerAriaLabel: {
+		attribute: "trigger-aria-label",
+		type: "String"
+	},
 	onclick: { type: "Object" },
 	onselect: { type: "Object" },
 	dropdownIcon: { type: "Object" }
@@ -18878,23 +18892,23 @@ function BuiltinCell(e, t) {
 			});
 			var f = sibling(c, 2), p = (e) => {
 				{
-					let i = (e) => {
-						var t = root_23$3(), n = child(t);
+					let i = (e, t = noop) => {
+						var n = root_23$3(), i = child(n);
 						{
 							let e = (e) => {
 								var t = root_22$3();
 								html(t, () => dots_vertical_default, !0), reset(t), append(e, t);
-							}, t = /* @__PURE__ */ user_derived(() => u("menuTrigger", a()));
-							Button(n, {
+							}, n = /* @__PURE__ */ user_derived(() => u("menuTrigger", a()));
+							Button(i, spread_props(t, {
 								ariaLabel: "More actions",
 								get testId() {
-									return get(t);
+									return get(n);
 								},
 								icon: e,
 								$$slots: { icon: !0 }
-							});
+							}));
 						}
-						reset(t), append(e, t);
+						reset(n), append(e, n);
 					}, c = /* @__PURE__ */ user_derived(() => get(t).menuItems.map((e) => ({
 						value: e.id,
 						label: e.label ?? e.id,
@@ -18911,6 +18925,7 @@ function BuiltinCell(e, t) {
 						get usePortal() {
 							return s();
 						},
+						interactiveTrigger: !0,
 						onselect: (e) => n().onMenuAction?.(a(), e.value, o()),
 						trigger: i,
 						$$slots: { trigger: !0 }
@@ -18932,25 +18947,25 @@ function BuiltinCell(e, t) {
 		var c = comment(), l = first_child(c), f = (e) => {
 			var i = root_18$4(), c = child(i);
 			{
-				let e = (e) => {
-					var n = root_23$3(), i = child(n);
+				let e = (e, n = noop) => {
+					var i = root_23$3(), o = child(i);
 					{
 						let e = (e) => {
 							var t = root_22$3();
 							html(t, () => dots_vertical_default, !0), reset(t), append(e, t);
-						}, n = /* @__PURE__ */ user_derived(() => get(t).ariaLabel ?? "More actions"), o = /* @__PURE__ */ user_derived(() => u("popupTrigger", a()));
-						Button(i, {
+						}, i = /* @__PURE__ */ user_derived(() => get(t).ariaLabel ?? "More actions"), s = /* @__PURE__ */ user_derived(() => u("popupTrigger", a()));
+						Button(o, spread_props(n, {
 							get ariaLabel() {
-								return get(n);
+								return get(i);
 							},
 							get testId() {
-								return get(o);
+								return get(s);
 							},
 							icon: e,
 							$$slots: { icon: !0 }
-						});
+						}));
 					}
-					reset(n), append(e, n);
+					reset(i), append(e, i);
 				}, i = /* @__PURE__ */ user_derived(() => get(t).items.map((e) => ({
 					value: e.id,
 					label: e.label ?? e.id,
@@ -18967,6 +18982,7 @@ function BuiltinCell(e, t) {
 					get usePortal() {
 						return s();
 					},
+					interactiveTrigger: !0,
 					onselect: (e) => n().onMenuAction?.(a(), e.value, o()),
 					trigger: e,
 					$$slots: { trigger: !0 }
@@ -19510,16 +19526,16 @@ function Table(e, t) {
 				let n = /* @__PURE__ */ user_derived(() => get(i).filter);
 				var a = root_11$6(), o = child(a);
 				{
-					let e = (e) => {
-						var a = root_10$7();
-						let o;
-						var s = child(a);
+					let e = (e, a = noop) => {
+						var o = root_10$7();
+						let s;
+						var c = child(o);
 						{
 							let e = (e) => {
 								var t = root_9$8();
 								html(t, () => chevron_down_sm_default, !0), reset(t), append(e, t);
 							}, n = /* @__PURE__ */ user_derived(() => get(i).testId && `${get(i).testId}-filter-trigger`);
-							Button(s, {
+							Button(c, spread_props(a, {
 								get ariaLabel() {
 									return `Filter by ${get(t) ?? ""}`;
 								},
@@ -19528,9 +19544,9 @@ function Table(e, t) {
 								},
 								icon: e,
 								$$slots: { icon: !0 }
-							});
+							}));
 						}
-						reset(a), template_effect(() => o = set_class(a, 1, "table-header-filter-trigger svelte-171ci2i", null, o, { "table-header-filter-active": typeof get(n).selectedValue == "string" })), append(e, a);
+						reset(o), template_effect(() => s = set_class(o, 1, "table-header-filter-trigger svelte-171ci2i", null, s, { "table-header-filter-active": typeof get(n).selectedValue == "string" })), append(e, o);
 					}, a = /* @__PURE__ */ user_derived(() => get(n).options.map((e) => ({
 						value: e.value,
 						label: e.label
@@ -19543,6 +19559,7 @@ function Table(e, t) {
 							return get(s);
 						},
 						role: "listbox",
+						interactiveTrigger: !0,
 						get testId() {
 							return get(c);
 						},

package/package.json

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